Flex布局语法
Flex布局的文字教程，因为阮一峰老师的那篇Flex布局教程
已经够详细了，这里就没必要赘述了。为了更方便直观，根据阮老师的教程制作了CSS Flexbox知识图谱如下所示
Flex布局语法简单上手
为了更好地掌握Flex-box的语法，我把阮一峰Flex布局教程的案例实现了一篇(阮一峰教程有网友更好的范例)
CSS Flexbox 容器属性
给容器添加如下属性
🌰1️⃣ flex-direction: column-reverse;
flex-direction属性决定『主轴』的方向包含四个值row(默认) |row-reverse|column|column-reverse
给容器添加如下属性
display: flex;
flex-direction: column-reverse;
🌰2️⃣-1 flex-wrap: wrap;
flex-wrap属性，定义如一条轴线(主轴方向)排不下所以的子项，该如何换行。包含三个值nowrap(默认)|wrap|wrap-reverse
如项目和容器设置了定
width,当子项width值的和(考虑margin)大于容器width的值，容器设定的flex-wrap: nowrap;则项目的width会『等比收缩』排列在主轴
display: flex;
flex-wrap: wrap;
🌰2️⃣-2 flex-wrap: wrap-reverse;
给容器添加如下属性
display: flex;
flex-wrap: wrap-reverse;
🌰3️⃣ justify-content: space-around 、justify-content: space-between
项目在『主轴』的对齐方式包含五个值 |
flex-start(默认值） |flex-end|center|space-between|space-around
flex布局: justify-content实践 🌰③-1
给容器添加如下属性
display: flex;
/* 每个项目两侧的间隔相等，相邻项目之间的间隔比项目与边框的间隔大一倍 */
justify-content: space-around;
display: flex;
/* 两端对齐，相邻项目之间的间隔相等 */
justify-content: space-between;
flex布局: justify-content实践 🌰③-2
🌰4️⃣ align-items: center;、align-items: flex-end;
align-items定义项目在『交叉轴』的对齐方式flex-start|flex-end|center|baseline|stretch(默认值）
🌰4️⃣-① align-items: center;
display: flex;
align-items: center;
给容器添加如下属性
display: flex;
align-items: flex-end;
🌰5️⃣ align-content: center;
align-content定义项目具有『多轴线(主轴方向)』在『交叉轴』的对齐方式flex-start|flex-end|center|space-between|space-around|stretch(默认值）
给容器添加如下属性
display: flex;
flex-wrap: wrap;
align-content: center;
CSS Flexbox 容器中的『项目』属性
🌰6️⃣ order: -1;
order值为数值，其值越小排列越靠前，默认值为order: 0;
flex布局: order: -1实践🌰⑥
容器中item的HTML
<div class="box">
<div class="item">NO.0</div>
<div class="item">NO.1</div>
<div class="item">NO.0</div>
<div class="item">NO.1</div>
<div class="item">NO.0</div>
<div class="item">NO.1</div>
<div class="item">NO.0</div>
<div class="item">NO.1</div>
</div>
给「item:nth-child(2n)」添加如下属性
order: -1;
🌰7️⃣ flex-grow: 1;
默认值为
flex-grow: 0;
给『项目』添加如下属性
/* 子项平均分配剩余的空间所占的比例 */
flex-grow: 1;
给「容器」添加如下属性
display: flex;
align-items: center;
🌰8️⃣ flex-shrink: 1;
flex-shrink属性定义了『项目的缩小比例』，默认值为1，即如果空间不足，该项目将缩小。该属性的的计算方式与flex-grow不同。具体不同之处查看深入理解flex布局之flex-grow、flex-shrink、flex-basis
给「.item:nth-child(2)」添加如下属性
flex-shrink: 0;
9️⃣🌰 flex-basis: 1;
定义了在分配多余空间之前，项目占据的主轴空间（main size）。可设置width height
给「项目」添加如下属性
flex-basis: 30px;
注：flex-grow、flex-shrink、flex-basis；三者可简写为{ flex: ...;}，具体使用方法请查看：
深入理解flex布局之flex-grow、flex-shrink、flex-basis
🌰🔟 align-self: flex-end;
align-self属性允许『某个项目』有与『其他项目』在『交叉轴』对齐方式不一样，有六个值可选auto|flex-start|flex-end|center|baseline|stretch
给「.item:nth-child(4)」添加如下属性
align-self: flex-end;
给「容器」添加如下属性
display: flex;
align-items: flex-start;
参考：
版权声明：本文为博主原创文章，未经博主许可不得转载
