

Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。
很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。
所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。
Flexbox 的基本原理是让布局变得灵活和直观。
为了实现这个目标,它让容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。
这听起来是很不错的原则。 但让我们看看它在实践中又会是什么样子的呢。
在本文中,我们将探讨 5 个最常见的 Flexbox 属性。我们将探索他们究竟做什么,如何使用它们,以及它们会产生什么实际效果。
注:对于基本的感念建议你先阅读?CSS3 Flexbox属性可视化指南
属性 #1: display:flex
这是我们的示例页面,如图:
你有 1 个灰色的 div
容器,包含了 4 个不同大小和颜色的 div
子元素。 到目前为止,每个 div
子元素都是默认的 display: block
。 因此,每个矩形子元素(flex项)都占据了一整行的宽度。
为了开始使用 Flexbox ,你需要将你的容器(container)变成一个 flex 容器。 这很简单:
#container { display: flex; }
注:首先请搞懂几个概念:
flex container(flex 容器)是父元素,也就是上图中灰色的容器元素;flex item(flex项)是flex 容器的直接子元素,也就是上图中彩色的矩形元素。原文中用了矩形元素表述,本文用矩形子元素(flex项)
或者flex item(flex项)
来表述。
不用很多的改变 – 你的 div
子元素现在已经显示为内联形式了。 但在对于布局来说,已经发生了很大的变化。 你其实给你的每个矩形子元素(flex项)添加了 flex context (上下文)。
现在,您可以开始在这个上下文中 定位 它们,这样与传统 CSS 相比会简单很多。
属性 #2: Flex Direction(排列方向)
Flexbox 容器有两根轴线:主轴(main axis)和与之垂直的交叉轴(cross axis),默认情况如下图所示:
默认情况下,flex item(flex项)沿着主轴从左到右排列。这就是为什么 flex 容器应用了 display: flex
属性后,你的矩形子元素(flex项)就会默认排列在一条水平线上的原因。
然而,Flex-direction
属性可以改变主轴方向。
#container { display: flex; flex-direction: column; }
这里有一个重要的区别:flex-direction: column
并不是把矩形子元素(flex项)从主轴移到交叉轴上对齐,而是让主轴自身从水平变成垂直。
对于flex-direction,还有一些其他选项值:row-reverse
和 column-reverse
。效果看图就明白了:
属性 #3: Justify Content(flex 项在主轴上的对齐)
justify-content
控制 flex item(flex项) 在主轴上的对齐方式。
在这里,你将深入了解一下主轴和交叉轴的区别。 首先,让我们回到 flex-direction: row
。
#container { display: flex; flex-direction: row; justify-content: flex-start; }
justify-content
属性有 5 个值可供你使用:
- flex-start
- flex-end
- center
- space-between
- space-around
每个属性值的显示效果请看图片:
space-around
和 space-between
这两个值的区别不能很直观的理解。space-between
是两端对齐,使每个矩形子元素(flex项)之间的间隔是相等的,但两端的矩形子元素(flex项)不会和容器之间产生间隔。
space-around
则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔,也就是说两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半(每个矩形子元素产生的间隔不会重叠,所以间隔变成两倍)。
最后一点:请记住,justify-content
决定 flex item(flex项)沿主轴的对齐方式,flex-direction
决定了主轴的方向。 当看到下一个属性的时候就会发现这两点很重要…
属性 #4: Align Items (flex 项在交叉轴上的对齐)
如果你掌握了 justify-content
属性,那么掌握 align-items
属性也就变得轻而易举了。
前面讲到 justify-content
定义了 flex item(flex项) 在主轴(main axis)上的对齐方式,而 align-items
属性则定义了 flex item(flex项) 在交叉轴(cross axis)上的对齐方式。
让我们将 flex-direction
属性重置为 row
,我们看到的 主轴(main axis) 和 交叉轴(cross axis) 与上图是一致。
然后,让我们深入的了解下 align-items
属性的值:
- flex-start
- flex-end
- center
- stretch
- baseline
前三个值与 justify-content
属性中的值是完全一样的,所以这里就不再解释了。
但是,接下来的两个值却有点不一样。
stretch
值会使每个 flex item(flex项) 的高度占据整个 交叉轴(cross axis),而 baseline
使每个 flex item(flex项) 按照他们段落标签的文本基线(baseline)对齐。
(注意 对于 align-items: stretch
来说,必须将每一个矩形子元素(flex项)的高度设置为 auto
,否则 height
属性将会覆盖该 stretch
)
对于 align-items: baseline
来说,要注意如果去掉段落标签或者没内容,矩形子元素(flex项)就会按照每个矩形的底部对齐,如下图所示:
注:
科普:文本基线(英语:Baseline)指的是多数字母排列的基准线。详细说明请查看[维基百科中关于Baseline的说明]
原文中关于 `align-items: baseline` 的文字和图片表述不是非常清晰,看看下图或许更容易理解:
为了更好地演示主轴和交叉轴的区别,让我们结合 justify-content
和align-items
,看看在 flex-direction
两个不同属性值的作用下,轴心有什么不同:
flex-direction
取值为 row
时,每个矩形子元素(flex项)会沿着水平的主轴排列,而取值为 column
时,它们就会沿着垂直主轴的向下排列。
虽然这些矩形子元素 (flex 项) 在两种情况下都可以水平或者垂直居中,但对于这些矩形子元素来说,一个是水平排列,一个垂直排列。
属性 #5: Align Self (flex 项的自身对齐)
align-self
允许你单独设置每个 flex item(flex项) 的对齐方式。
它会覆盖 flex container(flex 容器) 的 align-items
属性。默认情况下,所有 flex item(flex项) 的 align-self
属性均为 auto
,他们继承了 flex 容器的 align-items
属性。
#container { align-items: flex-start; } .square#one { align-self: center; } // 只有这个矩形元素会居中。
下面你将设置两个矩形子元素(flex项) 的 align-self
属性,其余的应用 align-items: center
和 flex-direction: row
,让我们看看会发生什么:
结论
尽管我们只介绍了 Flexbox布局 的一点皮毛,但对于基本的对齐,或者垂直排列的布局来说,这些属性应该足够了。
如果你想观看更多的 GIF Flexbox 教程,或者如果本教程对你有所帮助,你可以评论。
续文:《更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释》
原文地址:https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.pr7928unu
更多关于 Flexbox 的优秀文章:
亲,很想了解一下flex实现垂直居中的布局可是上面的图片都没显示呀
你肯定是安装广告屏蔽的插件
我还奇怪怎么老看不到图片呢,AdBlock里EasyListChina的规则:css88.com##a[href^=”http”]:not([href*=”.css88.com”]) > img
也太随意了吧……
唉,广告是多了点,但是AdBlock把我全部的图片都禁了
请问align-content在哪里
关于 `align-content` 可以查看 https://www.css88.com/archives/5744