作者：Scott Domes <br/>
编译：胡子大哈

翻译原文：http://huziketang.com/blog/posts/detail?postId=58aaadb2fc5b7f63e8c23f69 <br/>
英文原文：How Flexbox works — explained with big, colorful, animated gifs

转载请说明出处，保存原文链接以及作者信息

经由过程动图抽象地为你引见 flexbox 是怎样事变的

flexbox 许诺将我们从万恶的纯 CSS 中挽救出来（如垂直对齐）。

flexbox 也正在完成它的这一目的，然则用户掌握这一新的模子也将会是个应战。

因而在这里，我们将会用动图引见 flexbox 是怎样事变的，使得我们能够用它来做更好的规划。

flexbox 的潜伏准绳是使得规划越发天真和直观。

为了完成这一目的，它许可容器本身来决议怎样匀称地散布个中的元素——包括他们的尺寸和他们之间的间距。

这理论上来说，听起来很优美。然则让我们来看一下实践中会发作什么。

在这篇文章中，我们会研讨5个通用 flexbox 准绳。会探究它们都做了什么？你能够怎样运用它们？以及它们的结果是什么样的？

属性1：display: flex

在一个灰色背景的容器div内里，有四个色彩差别、尺寸差别的子div，此时每一个div有默许的display: block，每一个的宽度也占满了一整行。

为了运用 flexbox，须要将你的容器放在 flex 容器中 ，见以下代码：

#container {
  display: flex;
}

能够看到，发作了一点变化。你的四个div显现到了一行上，但也就仅此而已。但是你要知道，在这背地，你做了一件很有 power 的事变。你给予了你的 div 一个叫做 flex上下文 的东西。

你如今能够把它运用在你的上下文中了，是否是比传统的 CSS 简朴许多！

属性2：flex-direction

一个 flexbox 容器有两个坐标轴：主轴和交织轴，直观的来看以下图：

默许状况下，元素都是从左到右地散布在主轴上。这就是为何当你运用display: flex的时刻，外形默许程度散布的缘由。

flex-direction，能够使你的主轴扭转。

#container {
  display: flex;
  flex-direction: column;
}

这里有一个很主要的区分：flex-direction: column并非把你的外形散布在交织轴上。而是使主轴本身发作了扭转，从程度方向扭转到了垂直方向。

另有一些其他的flex-direction可选项，如：row-reverse和column-reverse。

属性3：justify-content

justify-content掌握的是你在主轴上怎样对齐元素。

这里我们须要对主轴和交织轴的区分有更深一点的明白。起首让我们回到flex-firection: row。

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

运用 justify-content，你有五个挑选：

1. flex-start

2. flex-end

3. center

4. space-between

5. space-around

space-around和space-between是最直观的。space-between使每一个元素之间有雷同的间隔，然则不包括元素和容器之间的间隔。

space-around让每一个元素块的两侧有雷同的闲暇间隔。这就意味着最外层的元素和容器之间的间隔，是两个元素之间间隔的一半（每一个元素块的摆布两侧都贡献了一个不堆叠的等间隔，因而是两倍的间隙）。

末了小结：记着justify-content是沿着主轴的，flex-direction是转换主轴的。这对你今后挪动元素很症结。

属性4：align-items

假如你已消化了justify-content，那末align-items对你俩讲将是易如反掌的事了。

justify-content是沿着主轴的，而align-items是运用到交织轴上的。

调解flex-direction，使得坐标轴看起来和上面的图一样。

接下来，我们一同看一下align-items敕令。

1. flex-start

2. flex-end

3. center

4. stretch

5. baseline

前三个和justify-content没什么区分，后两个则有一些差别。

stretch你的元素将会被拉伸充溢全部交织轴。
baseline则会使你的笔墨底部对齐。见图知意。

（注重：假如用align-items: stretch，你必需要将元素的height设置成auto，不然height属性将会掩盖stretch）

关于baseline要意想到，假如你把笔墨标签拿掉，那末将会用元素的底部对齐来替代本来的结果，以下图。

为了更好的展现主轴和交织轴，我们连系justify-content和align-items来看一下两个flex-direction的中心差别。

用row，元素被散布在程度主轴上。
用column，被散布在垂直主轴上。

在这两个 case 中，不管垂直照样程度方向，四个元素都是被居中的，然则这两种状况是相对不能相互替代的。

属性5：align-self

align-self许可你手动操纵一个特定元素的对齐体式格局。

关于一个元素而言，它基础上是对align-items的掩盖。只管align-self默许值设成了auto，然则它和align-items一切的属性都是一样的，这也使得这个元素继续了容器的align-items。

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// 只要这个外形会居中。

我们来看一下它设置的结果是什么样的。对前两个外形设置差别的align-self，其他元素设置为align-items: center和flex-direction: row。

结论

只管我们仅仅讲了 flexbox 的外相，然则这些敕令应当也充足你敷衍许多基础规划了。

假如你还想看到更多的 GIF flexbox 教程，或许这篇教程对你有所协助，请在下面给我点赞吧，或许给我留言。

谢谢你的浏览！

我近来正在写一本《React.js 小书》，对 React.js 感兴趣的童鞋，迎接指导。