CSS布局-flex布局

布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。 Flex 布局，可以简便、完整、响应式地实现各种页面布局。

一、flex布局属性

容器属性

1.flex-direction  

取值：row(默认 横向排列) | row-reverse(横向排列 倒序) | column(纵向排列) | column-reverse(纵向排列 倒序)   

 

 

2.flex-wrap

取值：nowrap(默认 不换行) | wrap(超过容器宽度换行 第一行紧贴顶部部) | wrap-reverse((超过容器宽度换行 第一行紧贴底部)

 

  

3.flex-flow

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行

4.justify-content

取值：flex-start(默认 左对齐) | flex-end(右对齐) | center(居中) | space-between(左右两端对齐 ) | space-around(项目之间间距为左右两侧项目到容器间距的2倍 ) | space-evenly(项目之间间距与项目与容器间距相等 )

 

 

 

 

 5.align-items

取值：stretch(默认)| flex-start(顶部) | flex-end(底部) | center(居中) | baseline(以第一行文字的基线为参照)

 

 

 

 6.align-content(需设置flex-wrap: wrap;)

取值：stretch(默认) | flex-start(顶部) | flex-end(底部) | center(居中) | space-between(上下两侧项目紧贴容器) | space-around(项目之间间距为上下两端项目与容器间距两倍) | space-evenly(项目之间间距与项目到容器之间间距相等)

 

 

 

 

 

 

 项目属性

 1.order

 取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

 

 2.flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

 

 3.flex-shrink

 取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

 

 

 4.flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

 

 5.flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

6.align-self

用于让个别项目拥有与其它项目不同的对齐方式

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。