flex弹性布局常用属性汇总
<style>.artBox { max-width: 1200px; font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; margin: auto; margin-bottom: 20px; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
.artBox table { border-collapse: collapse; white-space: pre-wrap; table-collapse: fixed; box-sizing: border-box; }
.artBox th, .artBox td { padding: 8px 10px; table-collapse: fixed; border: 1px solid #999; }
.artBox th { text-align: center; background: #eee; }
</style>
<div class="artBox">
<p>推荐文章：
<a href="https://blog.csdn.net/qq_74114417/article/details/143656069" target="_blank" title="点击访问">超详细的flex布局</a>
</p>
<p>下面是容器和项目常用属性汇总：</p>
<h2>1️⃣ 容器常用属性</h2>
<table width="100%">
<thead>
<tr>
<th align="center" width="60">序号</th>
<th width="140">属性名称</th>
<th width="320">含义与作用</th>
<th>可选值（头一个为默认值）</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td>flex-direction</td>
<td>设置主轴方向</td>
<td>row / row-reverse / column / column-reverse</td>
</tr>
<tr>
<td align="center">2</td>
<td>flex-wrap</td>
<td>设置子元素是否换行</td>
<td>no-wrap / wrap / wrap-reverse</td>
</tr>
<tr>
<td align="center">3</td>
<td>flex-flow</td>
<td>复合属性，相当于同时设置了 flex-direction 和 flex-wrap</td>
<td>赋值参考1和2</td>
</tr>
<tr>
<td align="center">4</td>
<td>justify-content</td>
<td>设置主轴上子元素的排列方式</td>
<td>flex-start / flex-end / center / space-between / space-around / space-evenly</td>
</tr>
<tr>
<td align="center">5</td>
<td>align-items</td>
<td>设置侧轴上子元素的排列方式（单行）</td>
<td>flex-start / flex-end / center / baseline /stretch</td>
</tr>
<tr>
<td align="center">6</td>
<td>align-content</td>
<td>设置侧轴上子元素的排列方式（多行）</td>
<td>flex-start / flex-end / center / space-between / space-around / space-evenly / stretch</td>
</tr>
</tbody>
</table>
<h2>2️⃣ 子项常用属性</h2>
<table width="100%">
<thead>
<tr>
<th align="center" width="60">序号</th>
<th width="140">属性名称</th>
<th width="320">含义与作用</th>
<th>可选值（头一个为默认值）</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td align="left">flex-grow</td>
<td>定义项目的放大比例</td>
<td>0 / 1 / N</td>
</tr>
<tr>
<td align="center">2</td>
<td align="left">flex-shrink</td>
<td>定义项目的缩小比例</td>
<td>1 / 0 / 2 / N</td>
</tr>
<tr>
<td align="center">3</td>
<td align="left">flex-basis</td>
<td>定义在分配多余空间之前，项目占据的主轴空间（main size）</td>
<td>auto / content / length</td>
</tr>
<tr>
<td align="center">4</td>
<td align="left">flex</td>
<td>flex-grow、flex-shrink、flex-basis的复合属性（建议的用法）</td>
<td>赋值参考 1、2 和 3</td>
</tr>
<tr>
<td align="center">5</td>
<td align="left">order</td>
<td>定义子项的排列顺序（前后顺序）</td>
<td>数值越小，排列越靠前，默认为 0，支持正负整数</td>
</tr>
<tr>
<td align="center">6</td>
<td align="left">align-self</td>
<td>控制子项自己在侧轴的排列方式</td>
<td>auto / flex-start / flex-end / center / baseline / stretch</td>
</tr>
</tbody>
</table>
</div> 【附】flex弹性布局简单演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
这个讲解真详细，那个布局演示只有放大的啊，多几个演示多好{:4_173:}
感谢黑黑的耐心讲解，学习了{:4_187:} 红影 发表于 2026-3-22 21:18
这个讲解真详细，那个布局演示只有放大的啊，多几个演示多好
感谢黑黑的耐心讲解，学习了{:4_187 ...
演示是起个头。CSS和HTML代码全部可以更改，学到哪一个可以全新设计代码 这个还真的许多不懂 小辣椒 发表于 2026-3-23 21:05
这个还真的许多不懂
不懂正常的 马黑黑 发表于 2026-3-23 21:35
不懂正常的
所以我很多都不会做{:4_198:} 小辣椒 发表于 2026-3-23 21:42
所以我很多都不会做
那也正常的。没人可以全能。 马黑黑 发表于 2026-3-23 08:30
演示是起个头。CSS和HTML代码全部可以更改，学到哪一个可以全新设计代码
是的，想演示哪个，都可以设计的。 红影 发表于 2026-3-23 22:48
是的，想演示哪个，都可以设计的。
对 马黑黑 发表于 2026-3-23 23:04
对
谢谢认同{:4_187:} 红影 发表于 2026-3-25 16:13
谢谢认同
不阔气 马黑黑 发表于 2026-3-25 17:17
不阔气
{:4_187:} 红影 发表于 2026-3-26 22:19
谢花
页:
[1]