记flex布局常常被忽略却很实用的几个属性

这些flex属性你知道吗？

前言

为了避免每次使用flex布局都得查一下阮老师的博客，决定自己写一篇博文，让自己记忆更加深刻，以后再次忘记也方便回顾自己当初的理解，这里不会讲解所有flex布局的属性，只是选取一部分可能被忽视，但却很实用的几个属性。

轴的概念

一般我们讨论flex布局的时候，总是会讲到交叉轴和主轴的概念，有时候交叉轴是水平的，有时候又是竖直的，真是傻傻分不清，为了搞清楚这个最基本的概念，我们先要理解flex-direction，这个属性表示容器中项目的排列方向，也就是决定主轴的方向，所以：

当flex-direction:row(默认)时主轴为水平轴，交叉轴为竖直轴
反之当flex-direction:column时主轴为竖直轴，交叉轴为水平轴
容器属性
基本属性

flex-direction： row(默认) | row-reverse | column | column-reverse;
flex-wrap： nowrap(默认) | wrap | wrap-reverse;
flex-flow： || ;
justify-content： flex-start(默认) | flex-end | center | space-between | space-around;
align-items： flex-start(默认) | flex-end | center | baseline | stretch;

align-items: baseline

这个我们尤其要注意，虽然用的不算多，但是一定要知道，这个是什么意思呢，baseline指的是，对其对齐点是项目内部第一行文字的基线，如：

.box{
    display: flex;
    width: 500px;
    height: 300px;
    align-items: baseline;
  }
  .smbox{
    height: 100px;
    width: 100px;
  }
  <div class="box">
    <div class="smbox">
      <h1>1</h1>
    </div>
    <div class="smbox">
      <p>2</p>
    </div>
    <div class="smbox">
      <h2>3</h2>
    </div>
  </div>

这里我们看到项目内第一行文字对齐，效果图:

align-content

上面列出的都是几个基本属性，这个属性迷惑了我挺久的，文档解释说：

定义了多根轴线的对齐方式，排列与交叉轴作为参考，如果项目只有一根轴线，该属性不起作用。

排列与交叉轴作为参考
项目只有一根轴线，该属性不起作用

那么这是分别是什么意思呢，我们来举个例子：

项目只有一根轴(主轴)：

.box{
    display: flex;
    width: 500px;
    height: 300px;
    border: 1px solid red;
    align-content: center;
  }
  .smbox{
    height: 100px;
    width: 100px;
    background: sandybrown;
    border: 1px solid green;
  }
  <div class="box">
    <div class="smbox">1</div>
    <div class="smbox">2</div>
    <div class="smbox">3</div>
  </div>

这里我们看到当容器中，只有主轴的时候，align-content就会失效，如图：

添加项目，让容器有主轴线和交叉(竖直)轴线：

.box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 500px;
    height: 300px;
    border: 1px solid red;
    align-content: center;
  }
  .smbox{
    height: 100px;
    width: 100px;
    background: sandybrown;
    border: 1px solid green;
  }
  <div class="box">
    <div class="smbox">1</div>
    <div class="smbox">2</div>
    <div class="smbox">3</div>
    <div class="smbox">4</div>
    <div class="smbox">5</div>
    <div class="smbox">6</div>
  </div>

align-content: flex-end生效，这个时候我们来解释第二条：“排列与交叉轴作为参考”，我们设置的flex-end实际上是以交叉轴为参考对象，如图：

这里，我们理解了align-content两个关键点：起效的条件以及参考轴线，下面是阮大大的图，这里盗用以下：

属性值：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。
stretch（默认值）：轴线占满整个交叉轴（当项目有自身的宽高值不起效）

项目的属性

或许很多时候，我们用flex布局就是为了省时间弄个水平垂直居中，我个人非常不建议这么做，第一是flex目前兼容性还有待提升，第二是仅仅是为了实现垂直居中来用flex就像是杀鸡用牛刀，尽管如此，对于很多项目属性，我们都是了解的不多，但是这在移动端开发时候，是个很有效的利器。

order

这个属性一般用于项目的排布顺序，数值越小，排列越靠前，默认为0:

<div class="box">
    <div class="smbox">1</div>
    <div class="smbox">2</div>
    <div class="smbox">3</div>
    <div style="order: -2" class="smbox">4</div>
    <div class="smbox">5</div>
    <div style="order: -1" class="smbox">6</div>
  </div>

flex-grow

项目的放大比例，我们先用一个例子来表示：

.box{
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    height: 300px;
    border: 1px solid red;
  }
  .smbox{
    height: 100px;
    width: 100px;
    background: sandybrown;
    border: 1px solid green;
  }
  <div class="box">
    <div style="flex-grow: 1" class="smbox">1</div>
    <div style="flex-grow: 3" class="smbox">2</div>
    <div class="smbox">3</div>
    <div style="flex-grow: 2" class="smbox">4</div>
    <div class="smbox">5</div>
    <div style="order: -1" class="smbox">6</div>
  </div>

效果图：

这里我们看到，放大比例是在同一行里，剩下的空间，具有flex-grow属性的项目均摊剩下的空间。

flex-shrink

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

<div class="box">
    <div class="smbox">1</div>
    <div class="smbox">2</div>
    <div class="smbox">3</div>
    <div style="flex-shrink: 0" class="smbox">4</div>
    <div class="smbox">5</div>
    <div class="smbox">6</div>
    <div class="smbox">7</div>
    <div class="smbox">8</div>
  </div>

如果设置为0，那么就是原始宽度，如图：

flex

这个属性其实就是个简写，它表示flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self

这个就比较另类了，align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，我们可以理解为独树一帜，如：

.box{
    display: flex;
    align-items: center;
    width: 480px;
    height: 300px;
    border: 1px solid red;
  }
  .smbox{
    height: 100px;
    width: 100px;
    box-sizing: border-box;
    background: sandybrown;
    border: 1px solid green;
  }
<div class="box">
    <div class="smbox">1</div>
    <div class="smbox">2</div>
    <div style="align-self: flex-start" class="smbox">3</div>
    <div class="smbox">4</div>
  </div>

效果图：

傻傻分不清：align-items、align-content、align-self

align-items：是表示项目在交叉轴上如何对齐，他的作用对象是整个容器布局。
align-content：定义了多根轴线的对齐方式，他的作用对象也是整个容器布局。
align-self：单个项目有与其他项目不一样的对齐方式，覆盖align-items。

总结

这篇博客的目的在于巩固自己对flex布局的理解，虽然一些属性可能有的不多，但是在一些特殊的情况下，是很有必要使用的，就免得使用各种绝对相对float定位来加大代码量，也不好维护，响应式也是flex最为优先的。

It is not easy to meet each other in such a big world. ：）

文章目录

前言