今天给大家分享的是弹性布局的项目属性 flex: 1
一起来学习吧
1 flex 简单回顾
flex 布局包括容器和项目
<div class="box"> //box为容器
<div class="item1">项目1</div> //box内的元素是项目
<div class="item2">项目2</div>
<div class="item3">项目3</div>
</div>
其中容器的属性包括
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
其中项目的属性包括
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
2 flex-grow
flex-grow 属性定义项目的放大比例，默认为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>flex-grow讲解</title>
<style type="text/css">
* {
padding: 0px;
margin:0px;
}
.box{
width: 800px;
border: 4px solid #ccc;
display: flex;
}
.box .item{
width: 100px;
height: 100px;
}
.item1 {
background-color: yellow;
flex-grow: 0;
}
.item2 {
background-color: red;
flex-grow: 0;
}
.item3 {
background-color: blue;
flex-grow: 0;
}
.item4 {
background-color: aquamarine;
flex-grow: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">项目1</div>
<div class="item item2">项目2</div>
<div class="item item3">项目3</div>
<div class="item item4">项目4</div>
</div>
</body>
</html>
如图所示：容器box存在剩余空间，也不放大。项目的宽度，就是自己设置的 width 的取值
flex-grow 如果设置为了1，则表示这些项目会放大，如图所示，充满整个容器
对不同的项目设置不同的 flex-grow
<!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-grow讲解</title>
<style type="text/css">
* {
padding: 0px;
margin:0px;
}
.box{
width: 800px;
border: 4px solid #ccc;
display: flex;
}
.box .item{
width: 100px;
height: 100px;
}
.item1 {
background-color: yellow;
flex-grow: 0;
}
.item2 {
background-color: red;
flex-grow: 1;
}
.item3 {
background-color: blue;
flex-grow: 2;
}
.item4 {
background-color: aquamarine;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">项目1</div>
<div class="item item2">项目2</div>
<div class="item item3">项目3</div>
<div class="item item4">项目4</div>
</div>
</body>
</html>
如图所示，不同项目占据的宽度不同，分别是100px、200px、300px、200px，那么这个值是如何计算的呢？如果你事先了解flex-basis，就明白了。
flex-basis默认auto，在代码中指的是项目自身宽度100px,所以主轴的剩余空间是：800px-100px-100px-100px-100px = 400px
flex-grow又指定了项目的放大的倍数，那么这个400px会被按照指定的倍数等分给每个项目
3 flex-shrink
flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
如果子项目宽度超过父容器宽度，即使是设置了 flex-grow，但是由于没有剩余空间，就分配不到剩余空间了。这时候有两个办法：换行和压缩。由于 flex 默认不换行，那么就采用 flex-shrink 压缩
<!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-shrink讲解</title>
<style type="text/css">
* {
padding: 0px;
margin:0px;
}
.box{
width: 500px;
border: 4px solid #ccc;
display: flex;
}
.box .item{
height: 100px;
}
.item1 {
width: 300px;
background-color: yellow;
flex-grow: 1;
flex-shrink: 1;
}
.item2 {
width: 150px;
background-color: red;
flex-grow: 1;
flex-shrink: 2;
}
.item3 {
width: 200px;
background-color: blue;
flex-grow: 1;
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">项目1</div>
<div class="item item2">项目2</div>
<div class="item item3">项目3</div>
</div>
</body>
</html>
3 flex-basis
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: length | auto
}
属性的取值分为两种情况：
- 项目设置了width，那么这个值就为这个项目的宽度，如：上文中提到的案列
- 项目没有设置宽度，是有内容撑开的，那么这个值就是撑开之后的大小。
<!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-basis讲解</title>
<style type="text/css">
* {
padding: 0px;
margin:0px;
}
.box{
width: 400px;
border: 4px solid #ccc;
display: flex;
}
.box .item{
height: 100px;
}
.item1 {
background-color: yellow;
}
.item2 {
background-color: red;
}
.item3 {
background-color: blue;
flex-grow: 2;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">项目1</div>
<div class="item item2">项目2</div>
<div class="item item3">项目33333333333</div>
</div>
</body>
</html>
4 flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex还有别的值，如下：
所以我们通常使用的 flex:1 就是 flex: 1 1 0
