【CSS】Flexbox Froggy | CSS flex box布局

heheer
160 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本文主要内容：总结了CSS中flex box布局相关的知识，让你初步掌握页面的布局

页面的布局一直是个很困扰我的事情，在系统地阅读相关文章之前，设计开发页面时只能不断地尝试将组件放在某一个位置，甚至连居中都需要使用px来定位，非常痛苦。

在进行了Codepip提供的两个编程小练习后，系统地了解了flexbox和grid，在此做一个总结

练习项目预览

首先这篇文章介绍在容器内部对组件布局的第一种方法，即display: flex;时，涉及以下基本属性

  • justify-content
  • flex-direction
  • flex-wrap
  • flex-flow
  • align-content

接下来我们将利用这些完成一个小练习，练习初始状态如下 image.png

我们接下来要将青蛙们移动到对应颜色的荷叶上，这就涉及了容器内的布局

flex-direction & flex-wrap

第一步我们可以看到荷叶是竖着排列并且分成两列的

所以对于竖着排列，设置flex-direction: column;即可

而对于分成两列，则是需要设置属性为可以换行，即设置flex-wrap: wrap; image.png

可以看到红色青蛙是在最下面的，所以重新设置flex-direction: column-reverse; image.png

同样，仅仅分成两列也还不够，还需要让红色青蛙这一列在容器的右侧，

所以重新设置flex-wrap: wrap-reverse; image.png

这样就完成了第一步的设置。

在此对上述两个属性做一个小结：

flex-direction: row (default) row-reverse column column-reverse

flex-wrap: nowrap (default) wrap wrap-reverse

  1. row与column无需多言，即横向或竖向排列
  2. row-reverse与column-reverse添加了一个翻转，即对同一行/列进行头尾互换
  3. nowrap与wrap也不用多说，无非一个不换行一个换行
  4. wrap-reverse可以理解为从容器的另一端开始换行

flex-flow

这个属性在讲完上述两个属性后只要提一句就可，即

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow，这个缩写属性接受两个属性的值，两个值中间以空格隔开。

所以上述的两行可以化作flex-flow: column-reverse wrap-reverse;

justify-content

第二步，我们需要将两只黄色青蛙移到中间，设置justify-content: center;，效果如下 image.png

所以对这个做一个总结：

justify-content: flex-start(default) flex-end center space-between space-around space-evenly

  1. 首先需要明确，justify对应flex-direction设置的方向上的布局
  2. 字面意思理解flex-start(默认) flex-end center
  3. space-between即空格在物体之间 (物体-空格-物体-空格-物体)
  4. space-around即空格在物体两边 (空格-物体-空格-空格-物体-空格)
  5. space-evenly即空格和物体交替排列 (空格-物体-空格-物体-空格)

align-content

最后一步就是将黄青蛙列移到容器最左边，设置align-content: space-between;，最终效果： image.png

总结如下：

align-content: flex-start flex-end center space-between space-around space-evenly stretch (default)

各种情况都与justify-content相同，除了方向为相对的另一个方向；

至于其默认的stretch指的是拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

最终我们写出的CSS代码如下：

#pond {
  display: flex;
  flex-flow: column-reverse wrap-reverse;
  justify-content: center;
  align-content: space-between;
}

项目链接：flexboxfroggy.com/

avatar
文章
阅读
粉丝