Flexbox 实现了帮助我们脱离 CSS 苦海(例如垂直居中)的目标,但想精通它却需要你应对一些挑战。所以,我们将通过一些动画让你直观地了解 Flexbox 的工作原理,并使用它来构建灵活的布局。Flexbox 的基本原则是提供一种构建灵活、直观的布局方式。为了达成这一目标,它让容器决定如何分配容器成员的大小以及空间。这听起来相当不错,那么,让我们来看看实践中它是如何工作的。在本文中,我们将深入的探讨 Flexbox 中 5 个常见的属性。看看它们能做什么,如何使用它们,以及使用它们构建的布局是什么样的。
属性 #1: Display: Flex
以下是示例页面:
Flex-start
Flex-end
Center
Space-between
Space-around
flex-start
flex-end
center
stretch
baseline
前三个值与 justify-content 属性中的值完全一致,没有太多需要解释的地方。但是,接下来两个值却有些不同。Stretch 指的是如果项目未设置高度或设为 auto,项目将占满整个容器。而 baseline 是指项目将与段落标签的底部对齐。
结论
虽然,我们仅仅是了解 Flexbox 的一些浅层的使用方法,但这些方法足以让你利用 Flexbox 应对大多数水平与垂直对齐的问题。如果你想观看更多的 GIF Flexbox 教程,或者如果本教程对你有所帮助,你可以点击喜欢或留下评论。