flex布局实例：把色子放进盒子里
目录
一、flex布局实例：把色子放进盒子里
1、基础样式
二、justify-content 属性
三、flex-direction 属性
四、align-items 属性
五、flex-wrap 属性
二、flex布局应用到常见场景
非常详细的讲解flex布局，看一看，练一练！
一、色子场景示例
核心知识点：display: flex将容器变为弹性容器，内部元素（色子）变为弹性项目，遵循 flex 布局规则。
假设我们有一个盒子（容器）和1- 6 个色子（项目），每个色子代表一个 flex 项目。如果不了解flex布局，请先阅读 Flex弹性布局
1、基础样式
制作色子布局的基础样式，以下实例都需要用到如下样式：
<style>
/* 主容器：使用Flex布局排列6个色子面 */.dice-container {display: flex;flex-wrap: wrap;gap: 20px;padding: 20px;}/* 每个色子面的基本样式 */.dice {display: flex;width: 100px;height: 100px;border: 2px solid black;border-radius: 10px;background-color: white;padding: 10px;}/* 点的样式 */.dot {width: 20px;height: 20px;border-radius: 50%;background-color: black;}
</style>二、justify-content 属性
以下是css样式和html代码
.justify-start-example {justify-content: flex-start;}
<div class="dice justify-start-example"><div class="dot"></div>
</div>
以下是css样式和html代码
.justify-end-example {justify-content: flex-end;} <div class="dice justify-end-example"><div class="dot"></div></div>
以下是css样式和html代码
.justify-center-example {justify-content: center;}<div class="dice justify-center-example"><div class="dot"></div></div>
以下是css样式和html代码
.justify-space-between-example {justify-content: space-between;}<div class="dice justify-space-between-example"><div class="dot"></div><div class="dot"></div></div>
以下是css样式和html代码
.justify-space-around-example {justify-content: space-around;}<div class="dice justify-space-around-example"><div class="dot"></div><div class="dot"></div></div>
以下是css样式和html代码
.justify-space-evenly-example {justify-content: space-evenly;}<div class="dice justify-space-evenly-example"><div class="dot"></div><div class="dot"></div></div>三、flex-direction 属性
以下是css样式和html代码
.flex-direction-row {flex-direction: row;}<div class="dice flex-direction-row"><div class="dot"></div><div class="dot"></div></div>
以下是css样式和html代码
.flex-direction-column {flex-direction: column;}<div class="dice flex-direction-column"><div class="dot"></div><div class="dot"></div></div>
以下是css样式和html代码
.flex-direction-row-reverse {flex-direction: row-reverse;}<div class="dice flex-direction-row-reverse"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div></div>
以下是css样式和html代码
.flex-direction-column-reverse {flex-direction: column-reverse;}<div class="dice flex-direction-column-reverse"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div></div>
四、align-items 属性
以下是css样式和html代码
.align-items-flex-start {align-items: flex-start;}<div class="dice align-items-flex-start"><div class="dot"></div></div>
以下是css样式和html代码
.align-items-flex-end {align-items: flex-end;}<div class="dice align-items-flex-end"><div class="dot"></div></div>
以下是css样式和html代码
.align-items-center {align-items: center;}<div class="dice align-items-center"><div class="dot"></div></div>
以下是css样式和html代码
.align-items-baseline {align-items: baseline;}<div class="dice align-items-baseline"><div style="background-color: aquamarine; padding: 5px; font-size: 12px;">1</div><div style="background-color: aquamarine; padding: 5px; font-size: 28px;">2</div><div style="background-color: aquamarine; padding: 5px; font-size: 18px;">3</div></div>
以下是css样式和html代码
.align-items-stretch {align-items: stretch;}<div class="dice align-items-stretch"><div style="background-color: aquamarine; padding: 5px; color:#000">1</div><div style="background-color: aquamarine; padding: 5px; color:#000">2</div></div>
五、flex-wrap 属性
以下是css样式和html代码
.flex-wrap-nowrap {flex-wrap: nowrap;}<div class="dice flex-wrap-nowrap"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div><div class="dot white textcenter">3</div><div class="dot white textcenter">4</div><div class="dot white textcenter">5</div><div class="dot white textcenter">6</div></div>
以下是css样式和html代码
.flex-wrap-wrap {flex-wrap: wrap;}<div class="dice flex-wrap-wrap"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div><div class="dot white textcenter">3</div><div class="dot white textcenter">4</div><div class="dot white textcenter">5</div><div class="dot white textcenter">6</div><div class="dot white textcenter">7</div><div class="dot white textcenter">8</div></div>
以下是css样式和html代码
.flex-wrap-wrap-reverse {flex-wrap: wrap-reverse;}<div class="dice flex-wrap-wrap-reverse"><div class="dot white textcenter">1</div><div class="dot white textcenter">2</div><div class="dot white textcenter">3</div><div class="dot white textcenter">4</div><div class="dot white textcenter">5</div><div class="dot white textcenter">6</div><div class="dot white textcenter">7</div><div class="dot white textcenter">8</div></div>
二、flex布局应用到常见场景
.dice.one {justify-content: center;align-items: center;}
/* 两点：对角 */.dice.two {justify-content: space-between;}.dice.two .dot:nth-child(2) {align-self: flex-end;}
/* 三点：对角 */.dice.three {justify-content: space-between;}.dice.three .dot:nth-child(2) {align-self: center;}.dice.three .dot:nth-child(3) {align-self: flex-end;}
/* 四点：2x2网格 */.dice.four {flex-wrap: wrap;justify-content: space-between;align-content: space-between;}.dice.four .column {flex-basis: 100%;display: flex;justify-content: space-between;}
/* 五点：4角+中心 */.dice.five {flex-wrap: wrap;justify-content: space-between;align-content: space-between;}.dice.five .column {flex-basis: 100%;display: flex;justify-content: space-between;}.dice.five .column:nth-child(2) {justify-content: center;}
/* 六点：3x2网格 */.dice.six {flex-wrap: wrap;justify-content: space-between;align-content: space-between;}.dice.six .column {flex-basis: 100%;display: flex;justify-content: space-between;}实例结合理论【 flex布局基础知识 】一定能做的很好！小伙伴们动手练习起来吧！