CSS Flex布局

Flex布局基本使用

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

Flex布局语法简单上手

为了更好地掌握Flex-box的语法，我把阮一峰Flex布局教程的案例实现了一篇(阮一峰教程有网友更好的范例)，具体分为两大类【Flex容器属性】&【Flex被容器包裹的项目属性】

CSS Flexbox容器属性

给容器添加如下属性

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

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

flex布局: flex-direction实践 🌰①

给容器添加如下属性

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

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

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

flex布局: flex-wrap实践 🌰2️⃣-1

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

display: flex;
flex-wrap: wrap;

---

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

flex布局: flex-wrap实践 🌰2️⃣-2

给容器添加如下属性

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;

flex布局: align-items实践 🌰④-1

给容器添加如下属性

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

flex布局: align-items实践 🌰④-2

🌰-5️⃣ align-content: center;

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

flex布局: align-content实践🌰⑤

给容器添加如下属性

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布局: flex-grow实践 🌰7️⃣

给『项目』添加如下属性

/* 子项平均分配剩余的空间所占的比例 */
flex-grow: 1;

给「容器」添加如下属性

display: flex;
align-items: center;

8️⃣-🌰 flex-shrink: 1;

**flex-shrink**属性定义了『项目的缩小比例』，默认值为1，即如果空间不足，该项目将缩小。该属性的的计算方式与flex-grow不同。具体不同之处查看深入理解flex布局之flex-grow、flex-shrink、flex-basis

flex布局: flex-shrink实践🌰8️⃣

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

flex-shrink: 0;

🌰-9️⃣ flex-basis: 1;

定义了在分配多余空间之前，项目占据的主轴空间（main size）。可设置width height

flex布局: flex-basis实践 🌰9️⃣

给「项目」添加如下属性

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

flex布局: align-self实践🌰⑩

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

align-self: flex-end;

给「容器」添加如下属性

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

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

• flexboxfroggy 共24关

通过flex布局帮助青蛙回到荷叶上

• flexboxdefense 共12关

通过布局移动炮台的位置，然后射击得分

以最后一关为例：

需求：移动上面炮台到合适的位置进行射击，80分以上表示合格

参考：

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