Flex 弹性盒子

这篇文章主要是分享了Flex弹性盒模型的基本概念, 简要介绍了Flex弹性盒模型的发展历程，最后重点介绍了Flex container六个属性以及Flex item的六个属性。下面我们就一一的往下看：

基本概念

Flex弹性盒模型是2009年W3C提出的一种新的布局方案，叫做Flex布局也叫作弹性盒子模型。它可以完整、简便、响应式的实现各种页面布局。布局的最外层元素叫做Flex容器（flex container），flex容器下面的子元素称之为容器成员（flex item）。

Flex容器默认存在两根轴，分别是：水平主轴（main axis）和垂直交叉轴（cross axis）；水平主轴的起始轴叫做main start，结尾叫做main end；垂直交叉轴的起始和结尾轴分别是cross start和cross end。容器成员flex item默认沿着主轴排列，单个容器成员占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

如下图所示：

发展历程

从2009年W3C制定这个标准以来，总共经历了三个版本。

• 最老版本，两个属性分别为：
  box（弹性伸缩盒）和inline-box（内联块级弹性伸缩盒）
• 过渡版本
  flexbox（弹性伸缩盒）和inline-flexbox（内联块级弹性伸缩盒）
• 最新版本
  flex（弹性伸缩盒）和inline-box（内联块级弹性伸缩盒）

容器（Flex container）属性

Flex container容器属性分为六个：flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，决定了子元素的排列方式，包括横向、纵向和一些对齐方式。

• flex-direction（决定主轴方向），主要有四个值：
  1 row（横向从左到右排列，左对齐）
  2 row-reverse（右对齐）
  3 column（纵向排列）
  4 column-reverse（反转纵向排列）
• flex-wrap（换行），主要有三个值：
  1 nowrap（子元素溢出时不换行）
  2 wrap（子元素溢出自动换行）
  3 wrap-reverse（反转wrap排列）
• flex-flow（flex-direction与flex-wrap简写）

  .main {
          display: flex;
          flex-flow: wrap row;
  }
  

• justify-content（容器成员 (flex item) 主轴上的对齐方式），主要有六个值：
  1 flex-start（主轴起始位置对齐 - 左对齐）
  2 flex-end（主轴结束位置对齐 - 右对齐）
  3 center（主轴中间位置对齐 - 居中）
  4 space-between（平均地分布在主轴上）
  5 space-around （平均地分布在主轴上, 两端保留子元素与子元素之间间距大小的一半）
  6 space-evenly（平均地分布在主轴上, 两端保留子元素与子元素之间间距相同间距）
• align-item（容器成员 (flex item) 交叉轴上的对齐方式），主要有五个值：
  1 stretch（拉伸容器成员 (flex item) 适应容器 - 默认属性）
  2 flex-start（交叉轴起始位置对齐 - 上对齐）
  3 flex-end（交叉轴结束位置对齐 - 下对齐）
  4 center （交叉轴中间位置对齐 - 居中）
  5 baseline（容器成员 (flex item) 基线对齐）
• align-content（多根轴线的对齐方式, 单轴线不起作用 - 每一根轴线理解为一个容器成员 (flex item)），一共有七个属性，和justify-content属性很相似但是多了一个stretch属性：
  1 flex-start（子元素溢出并且换行，父元素的高度大于子元素高度的总和-上对齐）
  2 flex-end（下对齐）
  3 center（居中对齐）
  4 space-between（中间间隔）
  5 space-around（两侧间隔）
  6 space-evenly（平均分布）
  7 stretch（拉伸，如果有高度的设置，属性不起作用）

容器成员 (flex item) 属性

flex item容器成员属性主要也包括了六个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self，决定每一个容器成员自己的属性。

• order（容器成员排列顺序，默认值是0，数值越小，排列越靠前，可以为负值）

  .item{
        order: 1;
  }
  

• flex-grow（容器成员放大比例，默认值也是0，也就是不增长，数值越大，占据剩余空间越大，不允许为负值）
• flex-shrink（容器成员缩小比例，默认值是1，0是不压缩，1是等比例压缩，数值越大，压缩比例越大，不允许为负值，压缩有一个最小宽度制约）
• flex-basis（分配多余空间之前，容器成员占据的主轴空间）
  实际上flex-basis就是width，但是优先级比width要高，比min-width和max-width又要低，是介于三者之间的一个属性，总共有三个值：
  1 auto
  2 px
  3 %
• flex（flex-grow, flex-shrink 和 flex-basis的简写）
  有三个特殊的值：auto（1 1 auto）、none（0 0 auto）、1（1 1 auto）。

  .item {
       flex-basis: 50px;
   }
  

• align-self（允许单个容器成员有与其他容器成员不同的对齐方式），总共有六个值：
  1auto （默认，遵循flex-content的属性）
  2 flex-start
  3 flex-end
  4 center
  5 baseline
  6 stretch

  .item {
      align-self: auto;
  }