css flex布局

什么是flex布局

网页布局（layout）是CSS的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性

+float属性。针对于某些特殊布局就显得非常不方便，例如，垂直居中就不容

易实现。

定义

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

特点

1.任何元素都可以指定为flex布局

2.设置flex布局后，子元素float、clear和vertical-align属性将失效。

flex属性

1.flex-direction

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items

6.align-content

flex 子元素属性

1.order
2.flex-grow
3.flex-shrink
4.lex-basis
5.flex
6.align-self

flex-direction

决定flex布局排版方向，默认为横向排版

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

flex-wrap

决定flex超出主方向布局位置时是否换行，以及换行方式

flex: nowrap | wrap | wrap-reverse

justify-content

决定flex布局在主轴方向上的排版方法

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

align-items

align-items: flex-start| flex-end | center| baseline | stretch
针对子元素在单一主轴上（一行上）交叉轴的排版方式
flex-start,flex-end,center规则和justify-content相同值的规则一样，将主轴替换为交叉轴即可

align-content

规则和justify-content相同值的规则一样，将主轴替换为交叉轴即可,在单一主轴（项目只有一行）上该属性无效

flex子元素属性

作用于flex项目下的直接子元素

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
将剩余空间等比缩放大小，分配给当前指定项目
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-sgrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

下表列出了在弹性盒子中常用到的属性:

display ： 指定 HTML 元素盒子类型。
flex-direction ：指定了弹性容器中子元素的排列方式
justify-content ： 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items ：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap ：设置弹性盒子的子元素超出父容器时是否换行。
align-content ： 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow ： flex-direction 和 flex-wrap 的简写
order ：设置弹性盒子的子元素排列顺序。
align-self : 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex : 设置弹性盒子的子元素如何分配空间。