CSS Flexbox初探

Flex布局语法

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

Flex布局语法简单上手

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

CSS Flexbox 容器属性

给容器添加如下属性

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

flex布局: flex-direction实践 ?①

给容器添加如下属性

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

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

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

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布局: 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;

?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;

flex布局: align-content实践?⑤

给容器添加如下属性

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

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

?6️⃣ order: -1;

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

给『项目』添加如下属性

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

给「容器」添加如下属性

display: flex;
align-items: center;

?8️⃣ flex-shrink: 1;

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

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

flex-shrink: 0;

9️⃣? flex-basis: 1;

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;

flex布局: align-self实践?⑩

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

align-self: flex-end;

给「容器」添加如下属性

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

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

flexboxfroggy 共24关

flexboxdefense 共12关

参考：

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

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