1.Flex布局/弹性布局： 是一种浏览器提倡的布局模型，布局网页更简单、灵活，还可以避免浮动脱标的问题，非常适合结构化布局。
2.设置方式： 父元素添加 display: flex，子元素可以自动的挤压或拉伸。在Flex布局模型中，可以通过调节主轴或侧轴的对齐方式来设置盒子之间的间距。
3.组成部分： 弹性容器、弹性盒子、主轴、侧轴 / 交叉轴
一、主轴对齐
1.原理： 使用justify-content调节元素在主轴的对齐方式
2.主轴对齐常见的属性值：
（1）flex start:默认值，表示从起点开始依次排列；
（2）flex-end：终点开始依次排列；
（3）center：沿主轴居中排列；
（4）space-around：弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧；
（5）space-between：弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间；
（6）space-evenly：弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。
（7）justify-content:stretch：默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主轴对齐方式</title>
<style>
.box {
width: 1200px;
height: 400px;
background-color: pink;
/* 弹性容器 */
display: flex;
/* 主轴对齐 默认值 起点排列 */
justify-content: flex-start;
/* 终点开始排列 */
justify-content: flex-end;
/* 水平居中 */
justify-content: center;
/* 盒子水平排列,中间距离1:2 */
justify-content: space-around;
/* 盒子2边靠边对齐,中间盒子自适应 */
justify-content: space-between;
/* 盒子平均分,中间距离1:1 */
justify-content: space-evenly;
}
.box span {
width: 200px;
height: 200px;
background-color: blue;
}
/* 在flex布局中没有元素之分,统一名字弹性盒子
弹性盒子的高度默认和父盒子一样高，宽度由内容撑开 */
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
二、测轴对齐
1.原理： 使用align-items调节元素在侧轴的对齐方式。
2.修改侧轴对齐方式属性:
（1）align-items（添加到弹性容器-父级 ）；
（2）align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级）。
3.侧轴对齐常见的属性值：
（1）justify-content:flex-start：起点开始依次排列；
（2）justify-content:flex-end：终点开始依次排列；
（3）justify-content:center：沿侧轴居中排列；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧轴对齐</title>
<style>
.box {
width: 800px;
height: 400px;
background-color: pink;
/* 弹性容器 */
display: flex;
margin: 0 auto;
/* 侧轴对齐 */
justify-content: space-between;
/* 侧轴居中 */
/* align-items: center; */
/* 侧轴起点开始排列 */
/* align-items: flex-start; */
/* 侧轴终点开始排列 */
/* align-items: flex-end; */
/* 默认值 stretch拉伸 默认高度和父元素一致,宽度有内容撑开*/
align-items: center;
}
/* 弹性盒子 */
.box span {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
三、伸缩比
1.原理： 使用flex属性修改弹性盒子伸缩比。
2.注意事项：
（1）只占用父盒子剩余尺寸；
（2）是给子盒子添加这个属性。
3.圣杯布局 圣杯布局是比较典型的布局，所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex的伸缩比</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
width: 1200px;
background-color: aqua
}
.box div{
/* 伸缩比，不带单位 */
flex:1;
height: 200px;
background-color: pink;
}
.box div:nth-child(2n){
flex:2;
}
/* 注意点：
1.伸缩比划分的是父元素的大小；
2.伸缩比是给子元素设置的；
3.伸缩比会覆盖父盒子的宽度 */
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
4.圣杯布局的核心思路：
（1）两侧盒子写固定大小；
（2）中间盒子 flex: 1; 占满剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/* 最小宽：盒子的最小宽度不能小于500px */
min-width: 500px;
display: flex;
/* width: 100%;*/
height: 50px;
}
.box .left,
.box .right{
width: 50px;
height: 50px;
background-color: aqua;
}
/* 中间自适应 */
.center{
/* 父元素剩下的距离都是这个盒子 */
flex: 1;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<!-- 圣杯布局:2边盒子要固定大小,中间的盒子自适应 -->
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
</body>
</html>
5.注意：
（1）在flex眼中，标签不再分类。简单说就是没有块级元素，行内元素和行内块元素之分，任何一个元素都可以直接给宽度和高度一行显示，弹性盒子是标准流，可以设置宽高，默认排在一行；
（2）Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动；
（3）当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex；
（4）caniuse.com/ 可以查看兼容性。
四、主轴更换属性
1.原理： 主轴默认是水平方向, 侧轴默认是垂直方向，使用flex-direction改变元素排列方向
2.常见属性值
（1）主轴排列方向：flex-direction: column; 默认水平
（2）主轴居中：justify-content: center;
（3）侧轴居中：align-items: center;
（4）水平方向排列，默认值：flex-direction: row;
（5）水平方向从右到左排列：flex-direction: row-reverse;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主轴更换属性</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
width: 400px;
height: 400px;
background-color: pink;
/* 主轴排列方向：默认水平 */
flex-direction: column;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: center;
/* 水平方向排列，默认值 */
flex-direction: row;
/* 水平方向从右到左排列 */
flex-direction: row-reverse;
margin: 0 auto;
}
.box span{
width: 150px;
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<span>图片</span>
<span>文字</span>
</div>
</body>
</html>
五、弹性盒子换行
1.原理 使用flex-wrap实现弹性盒子多行排列效果； flex-wrap: wrap;
2.常见属性值
flex-wrap: wrap;侧轴居中,多行排列方式的前提条件是有flex布局换行
（1）反向换行：flex-wrap: wrap-reverse;
（2）多行居中：align-content: center;
（3）从起点开始排列 ：align-content: flex-start;
（4）从终点开始排列：align-content: flex-end;
（5）盒子上下两边靠边对齐：align-content: space-between;
（6）盒子上下 1:2 进行排列：align-content: space-around;
（7）盒子上下 1:1 进行排列 ：align-content: space-evenly;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex换行</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
width: 1000px;
height: 600px;
list-style: none;
background-color: pink;
/* 换行 */
flex-wrap: wrap;
/* 反向换行 */
/* flex-wrap: wrap-reverse; */
/* 侧轴居中,多行排列方式的前提条件是有flex布局换行 */
/* 多行居中 */
align-content: center;
/* 从起点开始排列 */
align-content: flex-start;
/* 从终点开始排列 */
align-content: flex-end;
/* 盒子上下两边靠边对齐 */
align-content: space-between;
/* 盒子上下 1:2 进行排列 */
align-content: space-around;
/* 盒子上下 1:1 进行排列 */
align-content: space-evenly;
}
.box li{
width: 250px;
height: 200px;
background-color: aqua;
}
.box li:nth-child(2n){
background-color: yellowgreen;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
