chaihongjun.me

8张动图学会flex布局

      Flexbox 实现了帮助我们脱离 CSS 苦海(例如垂直居中)的目标,但想精通它却需要你应对一些挑战。所以,我们将通过一些动画让你直观地了解 Flexbox 的工作原理,并使用它来构建灵活的布局。Flexbox 的基本原则是提供一种构建灵活、直观的布局方式。为了达成这一目标,它让容器决定如何分配容器成员的大小以及空间。这听起来相当不错,那么,让我们来看看实践中它是如何工作的。在本文中,我们将深入的探讨 Flexbox 中 5 个常见的属性。看看它们能做什么,如何使用它们,以及使用它们构建的布局是什么样的。

属性 #1: Display: Flex

以下是示例页面:


8张动图学会flex布局

  • Flex-start

  • Flex-end

  • Center

  • Space-between

  • Space-around

  • 8张动图学会flex布局

  • flex-start

  • flex-end

  • center

  • stretch

  • baseline

  • 前三个值与 justify-content 属性中的值完全一致,没有太多需要解释的地方。但是,接下来两个值却有些不同。Stretch 指的是如果项目未设置高度或设为 auto,项目将占满整个容器。而 baseline 是指项目将与段落标签的底部对齐。


    8张动图学会flex布局

    结论

    虽然,我们仅仅是了解 Flexbox 的一些浅层的使用方法,但这些方法足以让你利用 Flexbox 应对大多数水平与垂直对齐的问题。如果你想观看更多的 GIF Flexbox 教程,或者如果本教程对你有所帮助,你可以点击喜欢或留下评论。

    知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»