flex:1表示什么
{
flex-grow:1;
flex-shrink:1;
flex-basis:0% // 设置了flex-grow和flex-grow这种情况下是无效的
}
-
flex-grow 分配剩余空间给设置flex-grow的dom元素
只有一个子元素的情况下
flex-grow：0 ， 不进行任何分配。
flex-grow：1，把所有的剩余空间分配给该元素。
flex-grow: 0.5 , 把剩余空间的1/2分配给该元素。
flex-grow: 2或者3，和flex：1的效果是一样的。
flex-grow：设置负数无效。
-
flex-shrink
flex-shrink: 1; 默认就是1，把溢出部分全部收缩。
flex-shrink: 0; 保持溢出。
flex-shrink：0.5 把溢出的部分搜索0.5倍。
flex-shrink: 2或者3 ：效果和设置1没有区别
-
flex-basis
flex-basis设置宽度。
width设置宽度和flex-basis的区别？
width只能设置横向宽度。
flex-basis会根据flex-direction改变，如果是默认的row，basis就是子元素的宽度，如果是column就会变成子元素的高度。
-
calc() 函数用于动态计算长度值
-
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
-
任何长度值都可以使用calc()函数进行计算；
-
calc()函数支持 "+", "-", "*", "/" 运算；
-
calc()函数使用标准的数学运算优先级规则；
-
等高布局
<!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>
.main{
width: 500px;
background: skyblue;
overflow: hidden;
display: flex;
}
.main div{
margin-right: 10px;
background: palevioletred;
flex: 1;
}
.main div:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="cols1">
<div>数据</div>
<div>数据</div>
<div>数据</div>
<div>数据</div>
</div>
<div class="cols2">
<div>数据</div>
<div>数据</div>
<div>数据</div>
</div>
<div class="cols3">
<div>数据</div>
<div>数据</div>
</div>
</div>
</body>
</html>
一行多个文本
<div style="display: flex; justify-content: space-between; flex-wrap: wrap; ">
<div class="item" style="background-color: skyblue;"></div>
<div class="item" style="background-color: antiquewhite;"></div>
<div class="item" style="background-color: aqua;"></div>
<div class="item" style="background-color: black;"></div>
<div class="item" style="background-color: blueviolet;"></div>
<div class="item" style="background-color: chartreuse;"></div>
<div class="item" style="background-color: orange;"></div>
<div class="item" style="background-color: aqua;"></div>
<div class="item" style="background-color: black;"></div>
<div class="item" style="background-color: blueviolet;"></div>
<div class="item" style="background-color: chartreuse;"></div>
</div>
<style>
.item{
color: black;
flex: 0 0 24%;
height: 30px;
text-align:center;
line-height:30px;
background-color: white;
margin-right: calc(4% / 3);
margin-bottom: calc(4% / 3);
}
/* 去除每行尾的多余边距 */
.item:nth-child(4n){
margin-right: 0;
}
/* 使最后一个元素的边距填满剩余空间 */
.item:last-child{
margin-right: auto;
}
</style>
