码迷,mamicode.com
首页 > 其他好文 > 详细

Flex

时间:2019-12-27 09:36:16      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:lex   行内元素   img   axis   布局   bsp   isp   end   lin   

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}
技术图片

 

 

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

技术图片

 

 技术图片

 

 技术图片

 

 技术图片

 

 技术图片

 

 技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

 技术图片

 

 

 

Flex

标签:lex   行内元素   img   axis   布局   bsp   isp   end   lin   

原文地址:https://www.cnblogs.com/wen-/p/12105475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!