网页传统布局基于盒模型,依赖display属性,position属性,float属性。对于特殊布局很不方便,比如:垂直布局。W3C提出新的解决方案-Flex布局,可简便,完整,响应式实现各种页面布局,目前已经得到所有浏览器的支持。Flex布局作为未来布局的首选。
Flex布局是什么?
Flex是Flexible Box的缩写,意为弹性布局,为盒装模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局,dispaly:flex;
行内元素也可使用Flex布局,display:inline-flex;
Webkit内核的浏览器,必须加上-webkit前缀,display:-webkit-flex;display:flex.
设置Flex布局后,子元素float、clear和vertical-align属性将失效
基本概念,采用Flex布局的元素,称为Flex容器,所有子元素自动成为容器成员,称为Flex项目。
Flex默认存在两根轴:水平的主轴和垂直的交叉轴。主轴的开始位置叫main start ,结束位置较mian end;交叉轴的开始位置较cross start,结束位置较cross end。项目默认沿主轴排列。单个项目占据的主轴空间较mian size,占据的交叉轴空间叫cross size.
容器的属性:flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction属性决定主轴的方向flex-direction:row|row-reverse|column|columen-reverse
row:主轴为水平,起点在左端
row-reverse:主轴为水平,起点在右端
column:主轴为垂直,起点在上沿
column-reverse:主轴为垂直,起点在下沿
flex-wrap属性定义,如果一条轴线排不下,如何换行,flex-wrap:nowrap|wrap|wrap-reverse.nowrap,不换行;warp:换行,第一行在上方.wrap-reverse:换行,第一行在下方
flex-flow属性是flex-direction和flex-wrap属性的简写,默认row nowarp.flex-flow:<flex-direction>||<flex-wrap>.justify-content属性定义了项目在主轴上的对齐方式,justify-content: flex-start | flex-end | center | space-betewwn | space-around.flex-start左对齐,flex-end右对齐,center居中,space-between两端对齐,项目之间的间隔都相等,space-around每个项目两侧间隔相等,项目之间间隔比项目与边框的间隔大一倍