Flex布局

前言

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。

什么是flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

display: flex;

行内元素也可以使用Flex布局。

display: inline-flex;

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在一根水平的轴和一根垂直的轴。

属性

容器默认有以下属性：

• 
  

• flex-direction &决定主轴的方向（即项目的排列方向）。

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

• flex-wrap &如果一条轴线排不下，如何换行

  flex-wrap: nowrap | wrap | wrap-reverse;

• flex-flow &是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

  flex-flow: flex-direction || flex-wrap;

• justify-content &定义了项目在主轴上的对齐方式。

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

• align-items &定义项目在交叉轴上如何对齐。

  align-items: flex-start | flex-end | center | baseline | stretch;

• align-content & 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
  

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• 项目有如下属性

  • order &项目的排列顺序。数值越小，排列越靠前，默认为0

    order: ;

  • flex-grow &定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

    flex-grow: ; /* default 0 */

  • flex-shrink &定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

    flex-shrink: ; /* default 1 */

  • flex-basis &定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

    flex-basis: | auto; /* default auto */

  • flex &是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

    flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]

  • align-self &允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

    align-self: auto | flex-start | flex-end | center | baseline | stretch;