一、CSS弹性布局
1.弹性盒子
弹性盒子的属性全都是写在父元素上面
1.1基础
解释:在父元素上写上display:flex;
或者display:inline-flex;
子元素就会出现弹性效果,其中flex是块元素,inline-flex是行内块元素。
如:
A:未加入display:flex;
B:加入display:flex;
1.2设置分布主轴
解释:该属性为:flex-direction: row;//默认是该参数
-
flex-direction: row;//元素从右向左排列
-
flex-direction: row-reserve;//元素从左向右排列
-
flex-direction: column;//元素从上向下排列
-
flex-direction: column-reverse;//元素从下向上排列
1.3设置换行与否
解释:该属性为:flex-wrap: nowrap;//默认是该参数
,注意不换行(nowrap),当父元素大小放不小子元素大小总和时,每个子元素就会等比例压缩,占满盒子
选项 | 说明 |
---|---|
nowrap | 元素不拆行或不拆列(默认值) |
wrap | 容器元素在必要的时候拆行或拆列 |
wrap-reverse | 容器元素在必要的时候拆行或拆列(以相反的顺序) |
1.4 flex-flow
解释:flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式
代码:flex-flow: row nowrap;
1.5 主轴设置
解释:该属性为:justify-content:flex-start;//默认值
,用于控制元素在主轴上的排列方式
选项 | 说明 |
---|---|
flex-start | 元素紧靠主轴起点(默认) |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
space-between | 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,元素之间的间隔比元素与容器的边距的间隔大一倍 |
space-evenly | 元素间距离平均分配 |
1.6 交叉轴设置
1.6.1 设置单行元素
如果把该属性应用到多行元素效果会很差
解释:该属性为:align-items:stretch;//默认值
,用于控制容器元素在交叉轴上的排列方式
选项 | 说明 |
---|---|
stretch | 元素被拉伸以适应容器(默认值)(体现该值效果时,不能设置高度) |
center | 元素位于容器的中心 |
flex-start | 元素位于容器的交叉轴开头 |
flex-end | 元素位于容器的交叉轴结尾 |
演示:
- stretch
1.6.2 设置多行元素
该属性为:align-content:stretch;//默认值
,用于控制容器元素在交叉轴上的排列方式,需要配合设置flex-wrap: wrap;//如果不换行体现不出来效果
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素(体现该值效果时,不能设置高度) |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
space-between | 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 |
space-evenly | 元素间距离平均分配 |
2.弹性元素
应用于子元素,也就是父元素设置display:flex;,其子元素可以设置下面的弹性元素
1.不能使用 float 与 clear 规则
2.弹性元素均为块元素
3.绝对定位的弹性元素不参与弹性布局
2.1 单个元素主轴设置
解释:属性为align-self:stretch;
,需要父元素里面的子元素都在一行即flex-wrap:nowrap;
,这样就能使得子元素能够单独被设置
选项 | 说明 |
---|---|
stretch | 将空间平均分配给元素 |
flex-start | 元素紧靠主轴起点 |
flex-end | 元素紧靠主轴终点 |
center | 元素从弹性容器中心开始 |
2.2 空间分配
解释:该属性为flex-grow:1;
用于将弹性盒子的可用空间,分配给弹性元素。可以使用整数或小数声明。
注意其会把盒子剩余空间都占满。元素flex-wrap:nowrap;
于flex-wrap:wrap;
都可以
<!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>Document</title>
<style>
.a{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 800px;
width: 500px;
align-content:center;
background-color: red;
}
.a1{
height: 100px;
width: 50px;
background: pink;
flex-grow: 1;
}
.a2{
height: 100px;
width: 50px;
background: blue;
flex-grow: 2;
}
.a3{
height: 100px;
width: 50px;
background: skyblue;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
</body>
</html>
效果:
-
设置
flex-grow
前:
-
设置
flex-grow
后(上面代码效果):
2.3 空间压缩
解释:该属性为flex-shrink: 1;//默认为1
在弹性盒子装不下元素时定义的缩小值,该属性使用于flex-wrap:nowrap;
即不换行时,会自动压缩,每个元素默认都有flex-shrink:1;。‘1’这个位置数越大压缩比列越大即元素越小,当flex-shrink:0; 元素不会进行任何压缩。
<!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>Document</title>
<style>
.a{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 800px;
width: 100px;
background-color: red;
}
.a1{
height: 100px;
width: 50px;
background: pink;
flex-shrink: 1;
}
.a2{
height: 100px;
width: 50px;
background: blue;
flex-shrink: 2;
}
.a3{
height: 100px;
width: 50px;
background: skyblue;
flex-shrink: 1;
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
</body>
</html>
效果:
-
flex-shrink不为0时(上面代码效果)
-
flex-shrink:0;
2.4 显示优先级
解释:该属性是order:0;
数值越小越靠前(也就是在弹性盒子主轴最前面),配合js效果很好