理解CSS flexbox弹性盒子布局

基本概念

使用display: flex或者display: inline-flex让元素成为伸缩容器，采用flex布局的元素称为伸缩容器（flex container），容器内的子元素称为伸缩项目（flex item）。

注意： 浏览器会将直接将伸缩容器内的文字包起来成为匿名伸缩项目。

flex布局使元素FFC化（flex formating context 伸缩格式化上下文），FFC是普通流的一种，部分CSS属性会对FFC造成影响，常见的有以下几点：

1. float、celar、vertical-align属性在伸缩项目上没有效果
2. text-align属性在伸缩容器上没有效果，该属性只应用于块级（block）容器
3. 伸缩容器的margin与其内容的margin不会重叠

伸缩容器有两种：块级伸缩容器（flex）和内联伸缩容器（inline-flex），类似于block和inline-block的区别，一个独占一行，一个非独占一行。

伸缩容器默认有两条轴：水平主轴（main axis）、垂直侧轴（cross axis），主轴方向不一定是水平的，它由flex-direction属性决定。主轴的起点叫main start，终点叫main end，侧轴的起点叫cross start，终点叫cross end。

伸缩项目默认沿着主轴排列，单个伸缩项目占据的主轴空间叫main size，占据的侧轴空间叫cross size。

伸缩容器

作用在伸缩容器上的属性有以下六个：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

伸缩容器各属性示例效果

flex-direction

语法：flex-direction：row (默认值) | row-reverse | column | column-reverse

该属性指定主轴的方向，即伸缩项目在伸缩容器中的排列方向。row是默认值，表示伸缩流是水平方向；row-reverse反向水平方向；column垂直方向；column-reverse反向垂直方向。

示例1演示了各属性效果

flex-wrap

语法：flex-wrap: nowrap(默认) | wrap | wrap-reverse

该属性指定当伸缩项目溢出伸缩容器时是否换行。nowrap默认值，表示不换行，伸缩项目会被压缩；wrap换行；wrap-reverse换行，换行排列反向。

允许使用overflow属性处理溢出内容的显示方式

示例2演示了各属性效果

flex-flow

该属性是flex-direction和flex-wrap属性的缩写，默认值row nowrap

justify-content

语法：justify-content: flex-start(默认) | center | space-between | space-between | space-around

该属性设置伸缩项目在主轴上的排列方式。默认值flex-start，表示和主轴的起点对齐；center居中显示；flex-end和主轴的终点对齐；space-between两端对齐，中间空白平分；space-around每个伸缩项目两侧的间隔相等。

示例3演示了各属性效果

注意： 如果子元素设置了margin:auto会导致justify-content属性失效

align-items

语法：align-items: flex-start | center | flex-end | baseline | stretch(默认)

该属性设置伸缩项目在侧轴上的对齐方式。默认值stretch，表示把伸缩项目拉伸到填充整个伸缩容器；flex-start和侧轴的起点对齐；center居中；flex-end和侧轴的终点对齐；baseline和伸缩容器的基线对齐。

伸缩项目如果设置了width或height属性，将优先于侧轴stretch对齐方式

示例4演示了各属性效果

align-content

语法：align-content: flex-start | center | flex-end | space-between | space-around | stretch(默认)

该属性定义具有多个轴线的伸缩元素（伸缩元素换行后就有了多个轴线）在侧轴上的对齐方式，如果只有一根轴线（元素在一行排列）该属性不起作用，所以当flex-wrap: nowrap时不起作用。默认值stretch表示把伸缩项目拉伸到填充整个伸缩容器；flex-start和侧轴的起点对齐；center居中；flex-end和侧轴的终点对齐；space-between两端对齐，中间的伸缩盒子平分空白区域；space-around伸缩项目周围的间距相等。

示例5演示了各属性效果

伸缩项目

伸缩项目是伸缩容器的子元素，伸缩容器中的直接文本也被视为伸缩项目，设置在伸缩项目上属性有以下六个：

align-self
flex-basis
flex-grow
flex-shrink
flex
order

伸缩项目每个属性示例效果

align-self

语法：align-self: auto(默认) | flex-start | center | flex-end | baseline | stretch

该属性定义伸缩项目自身在侧轴上的对齐方式，它会覆盖伸缩容器的侧轴对齐方式。默认值auto，表示属性值为伸缩容器的align-items值；flex-start和侧轴的顶部对齐；center中间对齐；flex-end和侧轴底部对齐；baseline基线对齐；stretch伸缩项目拉伸到填充满整个伸缩容器。对于匿名伸缩项目，该属性的值的等于与其关联的伸缩容器的align-items的值。

注意： 如果伸缩项目的外边距为auto，则它在伸缩容器中居中对齐，align-self将没有效果

注意： align-self:baseline属性必须设置在每个伸缩项目上才会有效果

例1演示了效果

flex-basis

语法: flex-basis: <length> | <percentage> | auto (默认)

该属性定义伸缩项目在主轴方向上初始大小，类似于width属性，但是比width属性优先级高。默认值auto，表示初始大小为伸缩项目自身设置的宽度（如果没有设置宽度，则为内容宽度）；属性值可以是长度单位或者百分比，百分比想对于其父伸缩容器的主轴长度。

例2演示了效果

flex-grow

语法：flex-grow: <number>

该属性定义当伸缩容器的剩余空间为正值时，此伸缩项目相对于容器内其他伸缩项目能扩展的空间比例（分配到的剩余空间的比例）。默认值0，表示剩余空间不进行分配；若所有伸缩项目flex-grow属性都为1，则平分剩余空间；若一个项目的flex-grow的属性为2，其他项目的为1，则前则分配的剩余空间比其他项多一倍。

注意： 扩展比例可以为小数

例3演示了效果

flex-shrink

该属性定义当伸缩容器的额外空间为负值时（伸缩项目在一行放不下时），此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。

语法：flex-shrink: <number>

该属性默认值1，表示当空间不足时，伸缩项目等比例缩小(flex-wrap的默认值nowrap，空间不足时不换行，于是就压缩了)。如果一个项目的flex-shrink: 0，其他项目的flex-shrink: 1，空间不足时前则不缩小。

注意： 收缩比例可以为小数

例4演示了效果

flex

语法：flex: none | [<flex-grow> <flex-shrink>? <flex-basis>?]

该属性是扩展比率（flex-grow）、收缩比率（flex-shrink）和伸缩基准值（flex-basis）的缩写，默认值0 1 auto，后两个属性值可选。

注意： 当flex属性值为纯数值时，flex-basis的属性值为0%；非纯数值时flex-basis的属性值为auto

flex: none -> flex: 0 0 auto;  // 不发生扩展和收缩，宽度为原始宽度
flex: auto -> flex: 1 1 auto;  // 发生扩展和收缩，宽度为原始宽度
flex: 0 auto -> flex: 0 1 auto; (默认值) // 不进行扩展，等比例收缩，宽度为原始宽度
flex: 1 -> flex: 1 1 0%;  // 发生扩展和收缩，分配剩余宽度  
flex: 0 -> flex: 0 1 0%;  // 收缩为最小宽度（一般就是内容的宽度）

例5演示了各属性值效果

order

语法： order: <number>

该属性定义伸缩项目的排列顺序，数值越小排列越靠前，默认值0，可以是负数。

例6演示了效果