一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情
前言
在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。
flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。
语法
flex-direction: 调整主轴方向
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
复制代码justify-content主要用来设置主轴方向的对齐方式
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
复制代码align-items用于调整侧轴的对齐方式
flex-start： 元素在侧轴的起始位置对齐。
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。
复制代码flex-wrap属性控制flex容器是单行或者多行,默认不换行
nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。
复制代码align-content用来设置多行的flex容器的排列方式
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。
复制代码小Demo
flex换轴
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
复制代码<style>
/* *{
margin:0;
padding:0;
} */
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
/* 主轴侧轴相互调换,而且主轴侧轴上的属性依旧可以使用，属性跟随轴一起走 */
/* 默认 主轴水平 */
/* flex-direction: row; */
/* 切换 主轴垂直 */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
align-items: center;
justify-content: space-between;
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码flex换行
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
</ul>
复制代码 <style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
/* 默认不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
}
li {
/* 弹性布局中，如果一排放不下，会压缩 */
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码flex侧轴对齐方式
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
</ul>
复制代码<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
flex-wrap: wrap;
flex-direction:column;
/* 单行和多行的区别 通过查看是否有换行属性 */
/* 无论是否生效，都不能够混用！！！！ */
/* 单行 */
/* align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: stretch; */
/* 多行 */
/* align-content: center; */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* 两端对齐，剩余平分 */
/* align-content: space-between; */
/* 每一个元素都拥有属于自己的间隙 */
/* align-content: space-around; */
/* 每一个元素之间间隙完全一样 */
/* align-content: space-evenly; */
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码flex:1的应用
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
复制代码 <style>
*{
padding: 0;margin: 0;
}
li{
/* width: 200px; */
height: 200px;
list-style: none;
background-color: skyblue;
}
ul {
/* 开启弹性布局 */
display: flex;
width: 1000px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
li:nth-child(2){
flex: 2;
background-color: teal;
}
li:nth-child(3){
flex: 3;
background-color: tomato;
}
</style>
复制代码综合使用 flex骰子
<div class="table">
<div class="touzi t1">
<span></span>
</div>
<div class="touzi t2">
<span></span>
<span></span>
</div>
<div class="touzi t3">
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t4">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
复制代码 <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.table {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 600px;
height: 600px;
margin: 100px auto;
background-color: teal;
}
.touzi {
display: flex;
width: 80px;
height: 80px;
background-color: whitesmoke;
border-radius: 15px;
padding: 10px;
}
.t1 span {
background-color: red;
}
.t1 {
justify-content: center;
align-items: center;
}
span {
display: block;
width: 18px;
height: 18px;
background-color: black;
border-radius: 50%;
}
.t2 {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.t3 {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.t3 span:nth-child(1) {
align-self: flex-start;
}
.t3 span:last-child {
align-self: flex-end;
}
.t4 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.t4 span {
margin: 5px;
}
.t5 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.t6 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
flex-direction: column;
}
.t5 span:nth-child(3) {
margin: 0 21px;
}
</style>
复制代码