初识CSS弹性布局

马黑黑

布局更多应用于网页设计，但这不等于说发帖人在布局方面没有什么事可做，实际上，绝大多数的帖子，尤其是音画帖，都融入了做帖人的精巧设计，设计中少不了布局这项工作。

以往，表格是做帖人必用的布局工具，它现在仍然可用。表格是装载二维数据的容器，用它无可厚非，但在HTML5时代，我们不能只会用表格来布局。

定位也是布局的重要手段，尤其是戴着脚镣舞蹈的做帖人，通过定位腾挪做超宽的作品已是家常便饭。

这里要讨论的，却不是以上这些，今天来接触一下CSS Flexbox —— 弹性框布局模块。 flexbox受支持度极好，不用担心现代的浏览器对它的兼容性。

flexbox是容器的一个display属性，当一个容器设置其display为flex，则其下的子元素便可以弹性布局，可以并排、可以竖排，可以设定布排方向，从右到左、从下到上的排列没什么不可以。试看以下CSS代码：

<style type="text/css">
    .father_Div { display: flex; border: 1px solid red; }
    .father_Div > div { margin: 8px; padding: 8px; font-size:24px; color:red; border: 1px solid pink; }
</style>

这样，以下的HTML代码，父div以内的子div就会自动并排在一起（因为我们没有设定其它控制值，它们是缺省的）：

<div class="father_Div">
    <div>甲</div>
    <div>乙</div>
    <div>丙</div>
    <div>丁</div>
</div>

思考一下：father_Div的display代码如果不要，上述HTML代码会呈现什么样的效果？

其余的讨论将在本帖中陆续推出。

马黑黑

一楼提供的代码演示：父容器的 display:flex; 设置使得其内的子div并排在一起:
 

甲

乙

丙

丁

红影

“其余的讨论将在本帖中陆续推出。”
要不要给你留楼层？

马黑黑

红影 发表于 2022-1-4 10:23
“其余的讨论将在本帖中陆续推出。”
要不要给你留楼层？

不用的，我没有强迫症

马黑黑

比较一下取消了 display:flex; 属性值的语句后子div们的排列效果：
 

甲

乙

丙

丁

红影

这个真好，可以随意布局，太实用了

马黑黑

flex 具有方向属性，flex-direction，若其值为 row 则子元素水平方向排列，为 column 则子元素们以垂直方向堆叠:
display: flex;
flex-direction: row;  /* 水平排列（默认），改 row 为 column 则垂直堆叠 */

还可以反向排列：

display:flex;
flex-direction: column-reverse;

这是垂直反向排列。reverse意为转向、倒转。row-reverse 就是水平排列的方向堆叠。

我下一个回帖将演示垂直排列的反向堆叠效果。

马黑黑

flex-direction: column-reverse; 使得儿子div们反向垂直堆叠：
 

甲

乙

丙

丁

马黑黑

红影 发表于 2022-1-4 10:48
这个真好，可以随意布局，太实用了

也不是随意，flex在布局方面提供了稍微丰富的方法吧

马黑黑

换行属性：flex-wrap 在父元素（容器）中，display设定为flex之后，可以定义flex项目即子元素们是否换行，即子元素的宽度累加超过父元素的宽度后要不要自动换行。flex-wrap属性就是设定换行与否的： flex-wrap: wrap; wrap 是缺省值，意思是如果没有 flex-wrap 语句，则是自动换行的。如果不要换行，请用 nowrap 替代 wrap。 以下代码，我们设定父元素宽度为500px，子元素单个宽度为100px并有内外边距值，让它们横向排列，看看父容器设定为不换行的情况，演示在我的下一个回帖：

甲

乙

丙

丁

戊

马黑黑

甲

乙

丙

丁

戊

 
自动换行的也试一个:
 

甲

乙

丙

丁

戊

马黑黑

flex-direction 和 flex-wrap 可以简写为 flex-flow，语句举例：

flex-flow: row nowrap;

上面这句等同于下面两句：

flex-direction: row;
flex-wrap: nowrap;

红影

马黑黑 发表于 2022-1-4 10:54
flex 具有方向属性，flex-direction，若其值为 row 则子元素水平方向排列，为 column 则子元素们以垂直方向 ...

这个反向堆叠效果好，写回文诗的时候，可以自动排列出来了，省得还得自己去一个个倒过来

加林森

好教程。谢谢老黑！

马黑黑

加林森 发表于 2022-1-4 12:28
好教程。谢谢老黑！

这个了解一下是有好处的

马黑黑

红影 发表于 2022-1-4 12:25
这个反向堆叠效果好，写回文诗的时候，可以自动排列出来了，省得还得自己去一个个倒过来

文字反向可以考虑用 span 做子元素

马黑黑

是孩子就会长大，flex项目中，子元素可以拥有自己的 flex-grow 属性：

flex-grow: 3；

这表示，该子项目的“弹性”是普通的项目的三倍，其实就是其排列方向的占比，也就是说它占的地儿是别人的三倍

加林森

马黑黑 发表于 2022-1-4 12:44
这个了解一下是有好处的

是的哦，对制作很有帮助的。

马黑黑

甲

乙

丙

丁

红影

马黑黑 发表于 2022-1-4 12:45
文字反向可以考虑用 span 做子元素

这个span没用过呢