前端知识 | Flexbox布局模式

• 简要介绍

flex 即 flexible box 弹性布局盒模型，,是2009年 w3c 提出的一种新型布局的属性，引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。浏览器支持如下：

flex 盒子模型的出现主要是为了解决基于 display+position+float 的处理部分情况的不便，比如居中布局：

使用定位：

 .father{   

        width: 400px;

        height: 400px;

      position: relative;

    }

  .children{

         width: 100px;

        height: 100px;

      position: absolute;

      top: 50%;

      height: 50%;

margin-left: -50px;

margin-top: -50px;

}

使用 flex 情况：

 .father{  

        width: 400px;

        height: 400px;

              display: flex;

              justify-content:center;

              align-items:center;

 }

  .children{

         width: 100px;

        height: 100px;

}

可以看见如果使用了 flex，就很就简单了。justify-content 和 align-items 分别定义了伸缩项目沿着主轴线的对齐方式和伸缩项目沿着纵轴对齐方式，Flex 的好处远远不止这些，下面我们来看下 w3c 定义的基本属性。

• 基本概念

主轴（main axis）：沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。

纵轴（cross axis）：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

• 容器属性

3.1 Flex-direction

flex-direction 会决定主轴的方向，它的值如下:

row（默认）：横向排列（左对齐）。

row-reverse：反转横向排列。

column：纵向排列。

column-reverse：反转纵向排列。

Flex-wrap

nowrap - 默认，弹性容器为单行。

wrap - 弹性容器为多行。

Flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写，可同时赋值 ， 默认 row nowrap。

Justify-content

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐。

space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

Align-items

flex-start：纵轴的起点对齐。

flex-end：纵轴的终点对齐。

center：纵轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认）：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸。

Align-conten

flex-start：与纵轴的起点对齐。

flex-end：与纵轴的终点对齐。

center：与纵轴的中点对齐。

space-between：与纵轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个纵轴。

• 项目属性

Flex

该属性有两个快捷值：auto (1 1 auto) ，none (00 auto)。

Order

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

Flex-grow

flex-grow 定义弹性盒子元素的扩展比率 ，默认为0，即如果存在剩余空间，也不放大，如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

Flex-shrink

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

Flex-basis

flex-basis 定义弹性盒子元素的收缩比率，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。它可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间。

Align-self

align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。align-self 除了 auto，其他与 align-items 属性基本一致。