初识CSS弹性布局
本帖最后由 马黑黑 于 2022-1-4 10:23 编辑布局更多应用于网页设计，但这不等于说发帖人在布局方面没有什么事可做，实际上，绝大多数的帖子，尤其是音画帖，都融入了做帖人的精巧设计，设计中少不了布局这项工作。
以往，表格是做帖人必用的布局工具，它现在仍然可用。表格是装载二维数据的容器，用它无可厚非，但在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代码会呈现什么样的效果？
其余的讨论将在本帖中陆续推出。
<p>一楼提供的代码演示：父容器的 display:flex; 设置使得其内的子div并排在一起:<br> </p>
<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>
<div class="father_Div">
<div>甲</div>
<div>乙</div>
<div>丙</div>
<div>丁</div>
</div> “其余的讨论将在本帖中陆续推出。”
要不要给你留楼层？ 红影 发表于 2022-1-4 10:23
“其余的讨论将在本帖中陆续推出。”
要不要给你留楼层？
不用的，我没有强迫症{:4_170:} <p>比较一下取消了 display:flex; 属性值的语句后子div们的排列效果：<br> </p>
<div style="border:1px solid red;">
<div style="font-size:24px;border:1px solid pink;margin:8px;padding:8px;">甲</div>
<div style="font-size:24px;border:1px solid pink;margin:8px;padding:8px;">乙</div>
<div style="font-size:24px;border:1px solid pink;margin:8px;padding:8px;">丙</div>
<div style="font-size:24px;border:1px solid pink;margin:8px;padding:8px;">丁</div>
</div> 这个真好，可以随意布局，太实用了{:4_178:} flex 具有方向属性，flex-direction，若其值为 row 则子元素水平方向排列，为 column 则子元素们以垂直方向堆叠:
display: flex;
flex-direction: row;/* 水平排列（默认），改 row 为 column 则垂直堆叠 */
还可以反向排列：
display:flex;
flex-direction: column-reverse;
这是垂直反向排列。reverse意为转向、倒转。row-reverse 就是水平排列的方向堆叠。
我下一个回帖将演示垂直排列的反向堆叠效果。
<p> flex-direction: column-reverse; 使得儿子div们反向垂直堆叠：<br> </p>
<style>
.fDiv { border:1px solid red; display: flex; flex-direction: column-reverse; }
.fDiv > div { width:30px;border:1px solid pink; margin:8px; padding: 8px;text-align:center; }
</style>
<div class="fDiv">
<div>甲</div>
<div>乙</div>
<div>丙</div>
<div>丁</div>
</div> 红影 发表于 2022-1-4 10:48
这个真好，可以随意布局，太实用了
也不是随意，flex在布局方面提供了稍微丰富的方法吧 换行属性：flex-wrap
在父元素（容器）中，display设定为flex之后，可以定义flex项目即子元素们是否换行，即子元素的宽度累加超过父元素的宽度后要不要自动换行。flex-wrap属性就是设定换行与否的：
flex-wrap: wrap;
wrap 是缺省值，意思是如果没有 flex-wrap 语句，则是自动换行的。如果不要换行，请用 nowrap 替代 wrap。
以下代码，我们设定父元素宽度为500px，子元素单个宽度为100px并有内外边距值，让它们横向排列，看看父容器设定为不换行的情况，演示在我的下一个回帖：
<style>
.pa { margin:0 auto; width:500px; border:1px solid red; display:flex; flex-wrap:nowrap; }
.pa > div { width:100px; margin:8px; padding:8px; border:1px solid pink; }
</style>
<div class="pa">
<div>甲</div>
<div>乙</div>
<div>丙</div>
<div>丁</div>
<div>戊</div>
</div>
<style>
.pa { margin:0 auto; width:500px; border:1px solid red; display:flex; flex-wrap:nowrap; }
.pa > div { width:100px; margin:8px; padding:8px; border:1px solid pink; }
</style>
<div class="pa">
<div>甲</div>
<div>乙</div>
<div>丙</div>
<div>丁</div>
<div>戊</div>
</div>
<p> <br>自动换行的也试一个:<br> </p>
<div class="pa" style="flex-wrap:wrap;">
<div>甲</div>
<div>乙</div>
<div>丙</div>
<div>丁</div>
<div>戊</div>
</div> 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 则子元素们以垂直方向 ...
这个反向堆叠效果好，写回文诗的时候，可以自动排列出来了，省得还得自己去一个个倒过来{:4_173:} 好教程。谢谢老黑！{:4_199:} 加林森 发表于 2022-1-4 12:28
好教程。谢谢老黑！
这个了解一下是有好处的 红影 发表于 2022-1-4 12:25
这个反向堆叠效果好，写回文诗的时候，可以自动排列出来了，省得还得自己去一个个倒过来
文字反向可以考虑用 span 做子元素 是孩子就会长大，flex项目中，子元素可以拥有自己的 flex-grow 属性：
flex-grow: 3；
这表示，该子项目的“弹性”是普通的项目的三倍，其实就是其排列方向的占比，也就是说它占的地儿是别人的三倍 马黑黑 发表于 2022-1-4 12:44
这个了解一下是有好处的
是的哦，对制作很有帮助的。 <div class="father_Div">
<div>甲</div>
<div style="flex-grow:3;">乙</div>
<div>丙</div>
<div>丁</div>
</div> 马黑黑 发表于 2022-1-4 12:45
文字反向可以考虑用 span 做子元素
这个span没用过呢{:4_173:}