Flexbox的标准全称叫做 CSS Flexible Box Module Level 1, 它的出现就是为了解决一次性排布大量元素的痛点。

---

Flexbox基础

Flexbox功能很强，不仅可以用于空间的排布，内容的对其，还可以对元素进行排序等等。另外flexble box可以自适应不同的设备大小，所以是响应式网站的基础。
那么如何定义flexbox呢？可以通过声明display:flex或是display：inline-flex来实现。来看个例子：

div#one {display: flex;}
div#two {display: inline-flex;}
div {border: 1px dashed; background: silver;} 
div > * {border: 1px solid; background: #AAA;} 
div p {margin: 0;}

<div id="one">
<p>flex item with<br>two longer lines</p> <span>flex item</span>
<p>flex item</p>
</div>
<div id="two">
<span>flex item with<br>two longer lines</span> <span>flex item</span>
<p>flex item</p>
</div>

image.png

再来个例子：

nav {
display: flex;
}
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/blog">Blog</a>
<a href="/jobs">Careers</a>
<a href="/contact">Contact Us</a>
</nav>

image.png

flex-direction属性

首先我们来看下如果定义元素排布的方向，可以是水平，也可以是垂直，通过flex-direction来定义：

image.png

来看下几个不同的示例：

<ol> 
  <li>1</li>
  <li>2</li> 
  <li>3</li> 
   <li>4</li> 
   <li>5</li>
</ol>

image.png

flex的封装

如果排布方向上的元素太多，超过了flex容器的宽度，那就需要用户通过flex-wrap属性来设置封装的规则：

image.png

默认值为nowrap，也就是所有元素都是单行显示的，下图显示了不同的wrap值对应的显示样式：

image.png

定义flex-flow

这个属性用来定义flex主轴或是副轴的方向和wrap属性：

image.png

可以想象下flex-flow其实就是flex-direction和flex-wrap的合体。

flex-flow: row; 
flex-flow: nowrap; 
flex-flow: row nowrap;

image.png

理解flex中的主轴和副轴等基本概念

• main axis：主轴，为flex元素排布方向
• main size： 主轴内容的总长度
• main start：主轴的起点
• main end： 主轴的终点
• cross axis： 副轴，和主轴垂直的方向
• cross size： 副轴内容的总长度
• cross start：副轴的起点

• cross end： 副轴的终点
  下图是所有概念的示意图：

  
  image.png

image.png image.png

---

使用justify-content调整主轴内容排布

justify-content可以让主轴上的内容以不同的形式进行排布：

image.png image.png

这里面比较有意思的是space-between，space-around和space-evenly。首先来看下space-between，它是将元素挨个从主轴的两侧开始排；而space-around则是将整个主轴进行等分，然后将元素放置在每个等分的中间；最后的space-evenly比较特殊，首先他先让元素排好，然后计算下元素占用的总宽度，接着用主轴的总宽度减去占用的总宽度得到最后剩下的空白，然后对对空白进行分隔，让元素之间的space相等。

对于nowrap的flex还会有更进一步的影响：

image.png

justify-content的例子

nav {
display: flex; 
justify-content: flex-start;
}

image.png

nav {
display: flex; 
justify-content: center;
}

image.png

---

对齐items

讲完了主轴的排布属性justify-content，下面来看下副轴的对其属性：

image.png image.png

几个值里比较有特色的就属baseline了，用的比较少，对其的是flex元素的baseline，也就是flex元素第一行baseline的位置，如下图绿色线标识：

image.png

---

align-self属性

如果想要针对flex元素的某几个做单独的align-item，那么就可以使用align-self属性，它的值跟align-item是一样的，帮助做更精细的对齐控制。

image.png image.png

---

对齐内容

align-content属性针对的副轴中有多行且有多余空间的情况，类似于主轴的justify-content：

image.png image.png

---

Flex-Item-Specific 属性

有时候我们需要对flex元素进行更细粒度的控制，而这可以通过flex属性来控制，它包含三个子属性：<flex-grow>, <flex-shrink>, <flex-basis>

flex属性

image.png

如果不想让宽度变化，就可以将<flex-grow>和<flex-shrink>都设置为0，例如：

.flexItem { 
width: 50%;
flex: 0 0 200px; 
}

flex-grow属性

flex-grow属性定义了当有足够空间的情况下，flex元素是否可以增长及增长的比例。

image.png

来看下面几个例子：

image.png

flex-shrink 属性

image.png

flex-basis属性

image.png

---

flex简写

我们推荐就是用flex这一简写来定义flex元素的属性，它可以接受全局的属性值，包括initial，auto，none，还有非负的整数。我们来挨个看下：

通用的flex值

• initial： flex元素的值基于width和height属性，允许缩小；
• auto： 也是基于width和height，同时支持放大和缩小；
• none：基于width和height，无法缩放；
• <number>: 如果给了数字，就会默认吧放大因此设为该值，同时将缩小因子和basis设为0.

---

order属性

flex元素默认上是按照源码的顺序来显示的，最多通过reverse来颠倒下顺序，但通过order属性是可以控制每个元素的排列顺序的：

image.png

默认来说所有元素的order都设置为0。同时支持负值，浏览器会自动从低到高排列。

ul{
display: inline-flex;
} 
li:nth-of-type(6) {
order: 1; }
li:nth-of-type(7) { order: -1;
}

image.png