flex: grow、shrink、basis
display:flex 和接下来我们介绍的这个 flex 是有区别的，前者是display实现弹性和模型的，而 flex 仅仅是弹性盒模型下 flex-grow、flex-shrink 和 flex-basis三个的缩写，用来定义和模型内部的子元素在浏览器重的展示形式。 下面我们主要讲这三个。
用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写。
fl父元素设置成 dispaly：flex 之后子元素的空间分配通过 flex 设置，其特点为弹性，即内部分配空间如果按照比例分配则其不会随着父元尺寸变化而变化。
子元素
{
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit|none;
}
说明
flex:
flex-grow| flex-shrink|flex-basis:
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.demo{
display:flex;
width:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}
图
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo{
display:flex;
width:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}
</style>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
解释：容器 demo 设置了 flex 总宽度为200px，项目 item 设置宽度 100px；如果正常情况下会超出容器，我们通过设置 flex:1 让项目自适应容器，并等分了空间。
.demo{
display:inline-flex;
width:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}
图
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
display:inline-flex;
width:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}
</style>
</head>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
demo和在一行，demo变成内联元素了。
<div class="demo-2">
<div class="item-left">1</div>
<div class="item-right">2</div>
</div>
.demo-2{
display:flex;
}
.item-left{
flex-basis: px;
}
.item-right{
flex-grow:;
}
图
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo-2{
display:flex;
}
.item-left{
flex-basis: px;
}
.item-right{
flex-grow:;
}
</style>
</head>
<body>
<div class="demo-2">
<div class="item-left">1</div>
<div class="item-right">2</div>
</div>
</body>
</html>
4.左侧为100px，右侧最大为600px的
.demo-2{
display:flex;
}
.item-left{
flex-basis: px;
background: red;
flex-shrink:;
}
.item-right{
flex-basis: px;
background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo-2{
display:flex;
}
.item-left{
flex-basis: px;
background: red;
flex-shrink:;
}
.item-right{
flex-basis: px;
background: yellow;
}
</style>
</head>
<body>
<div class="demo-2">
<div class="item-left">
1
</div>
<div class="item-right">
2
</div>
</div>
</body>
</html>
解释：右侧最大宽度为600，如果小于 600 右侧将随屏幕尺寸缩小。
现在的很多前端开发都会接到一些设计稿，要求在各种终端都可以适应，那么用好 flex 是关键。 flex:1 是其中最常见的设置,它等价于：
.demo{
flex-grow:;
flex-shrink:;
flex-basis:auto
}
其意思就是剩余空间就扩大，而剩余空间不足就缩小，就像弹簧一样。那么这部分就可以自适应各种屏幕大小了。
flex-basis 和 flex-grow 同时使用时候 flex-basis 不起作用。
flex 的 认是 0 1 auto，它们的顺序是 flex-grow flex-shrink 和 flex-basis 即三不：有剩余空间不扩大、当空间不足时缩小、不限制尺寸。
flex 有两个快捷值 即 auto（ 1 1 auto）和 none（0 0 auto）。
尽量不要使用缩小，因为它的兼容性不是很好。
602392714
清零编程群