强大的flex（弹性）布局

理解弹性布局首先需要了解弹性布局的几个概念：

1、主轴：容器内项目布局方向会沿着主轴方向排布

2、交叉轴：与主轴垂直的轴向

3、容器：弹性布局的容器

4、项目：弹性布局内的元素项目

Flex容器重要属性

1、flex-direction（设置主轴的方向，容器内项目会根据主轴方向布局）

flex-direction: row | column | row-reverse | column-reverserow | column | row-reverse | column-reverse

•  row   :  （默认值）主轴水平方向，项目从左至右布局 
•  column  :  主轴竖直方向，项目从上至下布局
•  row-reverse  ： 主轴水平方向，项目从右至左
•  column-reverse  ： 主轴竖直方向，项目从右至左

2、flex-wrap（项目尺寸超过容器尺寸是否换行）

flex-wrap: wrap | nowrap | wrap-reversewrap | nowrap | wrap-reverse

•  nowrap ：（默认值）项目合计尺寸超出容器尺寸也不换行
•  wrap ： 项目合计尺寸超出容器换行强制换行
•  wrap-reverse ： 项目合计尺寸超出容器尺寸换行，且第一行项目在下方

3、flex-flow（flex-direction 与 flex-wrap简写，默认值row  nowrap）

flex-flow: <direction> <isWrap><direction> <isWrap>

4、justify-content（项目在主轴上的布局方式）

justify-content: flex-start | flex-end | space-between | space-around | centerflex-start | flex-end | space-between | space-around | center

•  flex-start ： （默认值）容器内项目以主轴七点对齐
•  flex-end ：    容器内项目以主轴终点对齐
•  space-between ： 容器内项目两端对齐起点和终点，中间项目间隔平均分布
•  space-around ： 容器内项目两侧间隔相等
•  center ： 容器内项目居中排列

 

5、align-items （交叉轴方向项目的对齐方式）

•  flex-start ：项目与交叉轴起点对齐
•  flex-end ：项目与交叉轴终点对齐
•  center ：项目居中
•  baseline ：项目在基准线上保持对齐
•  stretch ：项目被拉伸在交叉轴方向占满高度

Flex容器内项目属性

1、order（容器内项目的排列顺序）

order: <integer> <integer>

当容器内项目有两个及以上设置有order属性时，设置order属性的项目会沿主轴方向根据order值小到大排序

2、flex（容器内项目缩放宽度等，时flex-grow， flex-shrink, flex-basis 的简写）

flex: <number> | <flex-grow> <flex-shrink> <flex-basis><number> | <flex-grow> <flex-shrink> <flex-basis>

 

 flex-grow ： 容器项目的放大比例，默认0不放大

 flex-shrink ：容器项目的缩小比例，默认1不缩小，若容器宽度小于所又项目宽度，项目将自动同比缩小

 flex-basis ：容器项目的width，默认auto

项目不设置flex时，默认值为： 0 1 auto；

当设置flex值为1个整数时，解析为flex-grow的值，flex-shrink 和flex-basis按默认值解析

当设置flex值为2个整数时，flex-basis解析为0%

当设置flex值为3个值时，flex-grow，flex-shrink，flex-basis按顺序解析

 

3、align-self（容器内项目在交叉轴的对齐方式）

align-self: flex-start | flex-end | center | baseline | stretchflex-start | flex-end | center | baseline | stretch

该属性设置在容器内项目选择器上，能够覆盖 align-items 的属性，既某个项目对齐方式单独生效

Flex缺点

flexbox兼容性较差下图是flexbox支持的浏览器，涉及到浏览器兼容时需要处理兼容。