CSS Flexbox初探

Flex布局语法

Flex布局的文字教程，因为阮一峰老师的那篇Flex布局教程
已经够详细了，这里就没必要赘述了。为了更方便直观，根据阮老师的教程制作了CSS Flexbox知识图如下所示

CSS Flexbox .png

Flex布局语法简单上手

为了更好地掌握Flex-box的语法，我把阮一峰Flex布局教程的案例实现了一篇(阮一峰教程有网友更好的范例)

---

CSS Flexbox 容器属性

🌰1️⃣ align-items: center;

flex布局-阮一峰教程实践 🌰①

给容器添加如下属性

display: flex;
align-items: center;

flex布局-阮一峰教程实践 🌰①

🌰2️⃣ flex-direction: column-reverse;

flex-direction属性决定『主轴』的方向包含四个值 row(默认) | row-reverse | column | column-reverse

flex布局-阮一峰教程实践 🌰②

给容器添加如下属性

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

flex布局-阮一峰教程实践 🌰②

🌰3️⃣-1 flex-wrap: wrap;

flex-wrap属性，定义如一条轴线(主轴方向)排不下，如何换行。包含三个值 nowrap (默认)| wrap | wrap-reverse

flex布局-阮一峰教程实践 🌰③-1

如项目和容器设置了定width,当项目width值的和(考虑margin)大于容器width的值，容器flex-wrap: nowrap;则项目的width会『等比收缩』排列在主轴

display: flex;
flex-wrap: wrap;

---

flex布局-阮一峰教程实践 🌰③-1

🌰3️⃣-2 flex-wrap: wrap-reverse;

flex布局-阮一峰教程实践 🌰③-2

给容器添加如下属性

display: flex;
flex-wrap: wrap-reverse;

flex布局-阮一峰教程实践 🌰③-2

🌰4️⃣ justify-content: space-around

项目在『主轴』的对齐方式包含六个值 | flex-start(默认值） | flex-end | center | space-between | space-around

flex布局-阮一峰教程实践 🌰④

给容器添加如下属性

display: flex;
justify-content: space-around;

flex布局-阮一峰教程实践 🌰④

🌰5️⃣ align-items: flex-end;

align-items定义项目在『交叉轴』的对齐方式 flex-start | flex-end | center | baseline | stretch(默认值）

flex布局-阮一峰教程实践 🌰⑤

给容器添加如下属性

display: flex;
align-items: flex-end;

flex布局-阮一峰教程实践 🌰⑤

🌰6️⃣ align-content: center;

align-content定义项目具有『多轴线(主轴方向)』在『交叉轴』的对齐方式 flex-start | flex-end | center | space-between | space-around |stretch(默认值）

flex布局-阮一峰教程实践 🌰6️⃣

给容器添加如下属性

display: flex;
flex-wrap: wrap;
align-content: center;

flex布局-阮一峰教程实践 🌰6️⃣

---

CSS Flexbox 容器中的『项目』属性

🌰7️⃣ order: -1;

order值为数值，其值越小排列越靠前，默认值为 order: 0;

flex布局-阮一峰教程实践 🌰7️⃣

容器中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;

flex布局-阮一峰教程实践 🌰⑦

🌰8️⃣ flex-grow: 1;

默认值为 flex-grow: 0;

flex布局-阮一峰教程实践 🌰⑧

给『项目』添加如下属性

flex-grow: 1;

给「容器」添加如下属性

display: flex;
align-items: center;

flex布局-阮一峰教程实践 🌰⑧

🌰9️⃣ flex-shrink: 1;

flex-shrink属性定义了『项目的缩小比例』，默认值为1，即如果空间不足，该项目将缩小。

flex布局-阮一峰教程实践 🌰9️⃣

给「.item:nth-child(2)」添加如下属性

flex-shrink: 0;

flex布局-阮一峰教程实践 🌰9️⃣

🔟🌰 flex-basis: 1;

flex布局-阮一峰教程实践 🌰 ⑩

给「项目」添加如下属性

flex-basis: 30px;

flex布局-阮一峰教程实践 🌰 ⑩

🌰⑪ align-self: flex-end;

align-self属性允许『某个项目』有与『其他项目』在『交叉轴』对齐方式不一样，有六个值可选 auto | flex-start | flex-end | center | baseline | stretch

flex布局-阮一峰教程实践 🌰 ⑪

给「.item:nth-child(4)」添加如下属性

align-self: flex-end;

给「容器」添加如下属性

display: flex;
align-items: flex-start;

flex布局-阮一峰教程实践 🌰 ⑪

---

通过玩两个游戏熟悉Flex属性的基本使用

flexboxfroggy 共24关

flexboxfroggy-通关场景

flexboxdefense 共12关

flexboxdefense-通关场景
最后一关参考方案

---

参考：

Flex 布局教程：语法篇-阮一峰
flex-MDN

版权声明：本文为博主原创文章，未经博主许可不得转载