flex布局
- 一、弹性盒子介绍
- 二、开启弹性盒子
- 三、主轴对齐方式 justify-content
- 四、侧轴对齐方式 align-items
- 五、修改主轴方向
- 六、弹性伸缩比 flex
- 七、弹性换行 flex-wrap
- 八、行对齐方式 align-content
一、弹性盒子介绍
- 作用： 和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单 （推荐使用）。
- 组成： 弹性容器+弹性盒子+主轴+侧轴
二、开启弹性盒子
- 在父元素上添加下列代码，表示开启弹性盒子
- 默认效果：
- 盒子沿主轴方向排列——主轴方向可以改变，主轴在哪个方向盒子就沿哪个方向排列
- 盒子自动挤压——盒子自动缩小适应父元素大小让所有子元素在一行显示
- 盒子自动拉伸——若父元素没有设置高度，那么子元素会自动拉伸高度适应父元素
dispaly:flex; 开启弹性盒子
三、主轴对齐方式 justify-content
- 属性名：justify-content
- 属性值
- 效果图
- 注意：在父元素上添加属性
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
四、侧轴对齐方式 align-items
- 属性名：
- align-items： 给容器内所有弹性盒子设置侧轴对齐方式
- align：self：单独给某个弹性盒子设置侧轴对齐方式
- 属性值：
- 效果图
align-items: stretch;
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-self: stretch;
align-self: center;
align-self: flex-start;
align-self: flex-end;
五、修改主轴方向
上诉说到弹性布局默认排列方向是沿主轴（水平）方向排列的，主轴在哪里盒子就沿哪里排列。如果要更改为垂直方向排列，那么就要改变主轴的方向。
-
属性名：flex-direction
-
属性值：
-
注意：若主轴方向变化那么侧轴也会发生变化
-
转换示例：
<style>
div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background-color: #2c5f44;
}
span{
font-size: 30px;
color: white;
}
img{
width: 300px;
height: 300px;
}
</style>
<div>
<span>肖战</span>
<img src="/img/xz.jpeg">
</div>
六、弹性伸缩比 flex
- 作用： 用于调整弹性盒子在主轴方向上所占的尺寸大小
- 属性名：flex
- 属性值： 整数数字，表示占用父级剩余尺寸的分数
- 注意： 弹性盒子没有设置尺寸的情况下，主轴方向尺寸靠内容撑开，侧轴方向默认拉伸
<style>
.box{
display: flex;
width: 800px;
height: 400px;
background-color: #2c505f;
}
.box1{
flex: 1;
height: 200px;
background-color: #2c5f44;
}
.box2{
flex: 2;
height: 200px;
background-color: rgba(232, 88, 70, 0.39);
}
.box3{
flex: 3;
height: 200px;
background-color: rgba(212, 232, 228, 0.74);
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
七、弹性换行 flex-wrap
上面说过弹性盒子会自动挤压或拉伸，意味着即使一行盛不下所有盒子也会默认挤压到一行里面，不会自动换行。因此如果想要实现换行效果则需设置弹性换行。
- 属性名：flex-wrap
- 属性值：
- wrap：换行
- nowrap：不换行
- 注意： 在父元素里设置
- 示例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
dl{
display: flex;
flex-wrap: wrap;
width: 900px;
height: 500px;
background-color: #507fbc;
margin: 50px auto;
}
dd{
margin-top: 10px;
width: 180px;
height: 230px;
background-color: skyblue;
}
</style>
</head>
<body>
<dl>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
</body>
八、行对齐方式 align-content
- 注意：对只有一行的弹性盒子不生效
- 属性名：align-content
- 属性值：
- 效果图：
https://www.runoob.com/try/playit.php?f=playcss_align-content&preval=space-around
