您的位置:首页 » 分类: html5+css3 » 文章: Flexbox布局是如何工作的 – 用大彩图和GIF动画解释

Flexbox布局是如何工作的 – 用大彩图和GIF动画解释

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。

很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。

所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。

Flexbox 的基本原理是让布局变得灵活和直观。

为了实现这个目标,它让容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。

这听起来是很不错的原则。 但让我们看看它在实践中又会是什么样子的呢。

在本文中,我们将探讨 5 个最常见的 Flexbox 属性。我们将探索他们究竟做什么,如何使用它们,以及它们会产生什么实际效果。

愚人码头注:对于基本的感念建议你先阅读 CSS3 Flexbox属性可视化指南

属性 #1: display:flex

这是我们的示例页面,如图:

display:flex 示例

你有 1 个灰色的 div 容器,包含了 4 个不同大小和颜色的 div 子元素。 到目前为止,每个 div子元素都是默认的 display: block 。 因此,每个矩形子元素(flex项)都占据了一整行的宽度。

为了开始使用 Flexbox ,你需要将你的容器(container)变成一个 flex 容器。 这很简单:

#container {
  display: flex;
}

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),默认情况如下图所示:

Flexbox 容器 的主轴(main axis)和 交叉轴(cross axis)

默认情况下,flex item(flex项)沿着主轴从左到右排列。这就是为什么 flex 容器应用了 display: flex 属性后,你的矩形子元素(flex项)就会默认排列在一条水平线上的原因。

然而,Flex-direction属性可以改变主轴方向。

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

Flexbox 容器 的主轴方向

这里有一个重要的区别:flex-direction: column 并不是把矩形子元素(flex项)从主轴移到交叉轴上对齐,而是让主轴自身从水平变成垂直。

对于flex-direction,还有一些其他选项值:row-reversecolumn-reverse。效果看图就明白了:

Flexbox 容器 的主轴方向

属性 #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 个值可供你使用:

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around

每个属性值的显示效果请看图片:

Justify Content(对齐方式)

space-aroundspace-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)上的对齐方式。

Flexbox 容器 的主轴(main axis)和 交叉轴(cross axis)

让我们将 flex-direction 属性重置为 row,我们看到的 主轴(main axis) 和 交叉轴(cross axis) 与上图是一致。

然后,让我们深入的了解下 align-items 属性的值:

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

前三个值与 justify-content 属性中的值是完全一样的,所以这里就不再解释了。

但是,接下来的两个值却有点不一样。

stretch值会使每个 flex item(flex项) 的高度占据整个 交叉轴(cross axis),而 baseline 使每个 flex item(flex项) 按照他们段落标签的文本基线(baseline)对齐。

flex 项在交叉轴上的对齐

(注意 对于 align-items: stretch 来说,必须将每一个矩形子元素(flex项)的高度设置为 auto,否则 height 属性将会覆盖该 stretch

对于 align-items: baseline 来说,要注意如果去掉段落标签或者没内容,矩形子元素(flex项)就会按照每个矩形的底部对齐,如下图所示:

 align-items: baseline没内容的情况

愚人码头注:
科普:文本基线(英语:Baseline)指的是多数字母排列的基准线。详细说明请查看[维基百科中关于Baseline的说明]
原文中关于 `align-items: baseline` 的文字和图片表述不是非常清晰,看看下图或许更容易理解:

为了更好地演示主轴和交叉轴的区别,让我们结合 justify-contentalign-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: centerflex-direction: row,让我们看看会发生什么:

flex项的align-self属性

结论

尽管我们只介绍了 Flexbox布局 的一点皮毛,但对于基本的对齐,或者垂直排列的布局来说,这些属性应该足够了。

如果你想观看更多的 GIF Flexbox 教程,或者如果本教程对你有所帮助,你可以评论。

续文:《更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释

原文地址:https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.pr7928unu

推荐阅读:

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

版权声明

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。
转载请注明文章的完整链接:http://www.css88.com/archives/7212
作者(译者): 及 网站出处:CSS88.com

5 条评论 - 关于 “Flexbox布局是如何工作的 – 用大彩图和GIF动画解释

  1. 我还奇怪怎么老看不到图片呢,AdBlock里EasyListChina的规则:css88.com##a[href^=”http”]:not([href*=”.css88.com”]) > img
    也太随意了吧……

发表评论

电子邮件地址不会被公开。 必填项已用*标注