文章目录
Flex布局
01-标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
02-浮动Float(了解)
基本使用
浮动就是让元素脱离标准流，简称脱标
作用：让块元素水平排列。
属性名：float
属性值
- left：左对齐
- right：右对齐
浮动 使用left：左对齐 .one和.two全部脱标
<style>
/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
.one {
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
<div class="one">one</div>
<div class="two">two</div>
浮动 使用right：右对齐 .one和.two全部脱标
<style>
/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
.one {
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: orange;
float: right;
}
</style>
<div class="one">one</div>
<div class="two">two</div>
**脱标 ** 下图.one浮动，不在占用标准流的位置(像油飘在水上一样)，这就是脱标了。.two没有使用浮动，即没有脱标，所以左上角开始标准流排布。
<style>
/* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
.one {
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
<div class="one">one</div>
<div class="two">two</div>
特点：
- 浮动后的盒子顶对齐
- 浮动后的盒子具备行内块特点
- 浮动后的盒子脱标，不占用标准流的位置
脱标的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
margin: 100px auto;
height: 300px;
width: 300px;
background-color: pink;
}
.son1{
height: 100px;
width: 300px;
background-color: skyblue;
}
.son2{
/* float: left; */
height: 100px;
font-weight: 700;
font-size: 20px;
color: red;
}
.son3{
background-color: #efefef;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">我是第一个</div>
<span class="son2">我是第二个</span>
<div class="son3">我是第三个</div>
</div>
</body>
</html>
加入浮动后的特点
1.相对于现在的位置浮动，不占位 (绝对定位会用这个特点)
2.图文混排(文字在图片周围)
.son2{
/* 将浮动注释取消 */
float: left;
height: 100px;
font-weight: 700;
font-size: 20px;
color: red;
}
产品区域布局
HTML标签
<!-- 版心：左右，右面：8个产品 → 8个 li -->
<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS样式
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.product {
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: pink;
}
.left {
float: left;
width: 234px;
height: 628px;
background-color: skyblue;
}
.right {
float: right;
width: 978px;
height: 628px;
background-color: brown;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
}
/* 第四个li和第八个li 去掉右侧的margin */
.right li:nth-child(4n) {
margin-right: 0;
}
/* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
</style>
清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
解决方法：清除浮动（清除浮动带来的影响）
场景搭建
<style>
.father {
margin: 10px auto;
width: 1200px;
/* 这个父级盒子.father高度取消 那么子元素 .left .right盒子无法撑起 这个父盒子 */
/* height: 300px; */
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right {
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom {
height: 100px;
background-color: brown;
}
</style>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
当.father的高度取消掉如下图。通过检查元素发现不存在高度，说明确实浮动的盒子没有撑起父盒子 ，父盒子.father "脱标’'了
清除浮动(解决上面脱标)的方法
- 额外标签法
- 单伪元素法
- 双伪元素法
- overfow法
法一：额外标签法
在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
<!DOCTYPE html>
<html lang="en">
<head>
<title>css-day06-练习</title>
<style>
.father {
margin: 10px auto;
width: 1200px;
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right {
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom {
height: 100px;
background-color: brown;
}
/* 这里 */
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<!-- 这里面加个clearfix -->
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
法二：单伪元素法
使用伪元素，相当于方法一 在父元素内容的最后添加一个块级元素 注意content: “”;必须有
-
准备 after 伪元素
.clearfix::after { content: ""; display: block; clear: both; } -
父级使用 clearfix 类
<div class="father clearfix"></div> -
整合一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-day06-练习</title> <style> .father { margin: 10px auto; width: 1200px; background-color: pink; } .left { float: left; width: 200px; height: 300px; background-color: skyblue; } .right { float: right; width: 950px; height: 300px; background-color: orange; } .bottom { height: 100px; background-color: brown; } /* 放在这里，谁用给谁就行 */ .clearfix::after { content: ""; display: block; clear: both; } </style> </head> <body> <!-- 请看day03的类选择器的部分 --> <div class="father clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body> </html>
法三：双伪元素法(推荐)
-
准备 after 和 before 伪元素
/* before 解决外边距塌陷问题 */ /* 双伪元素法 */ .clearfix::before, .clearfix::after { content: ""; display: table; } /* after 清除浮动 */ .clearfix::after { clear: both; } -
父级使用 clearfix 类
<div class="father clearfix"></div> -
合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-day06-练习</title> <style> .father { margin: 10px auto; width: 1200px; background-color: pink; } .left { float: left; width: 200px; height: 300px; background-color: skyblue; } .right { float: right; width: 950px; height: 300px; background-color: orange; } .bottom { height: 100px; background-color: brown; } /* before 解决外边距塌陷问题 */ /* 双伪元素法 */ .clearfix::before, .clearfix::after { content: ""; display: table; } /* after 清除浮动 */ .clearfix::after { clear: both; } </style> </head> <body> <!-- 请看我发表的博客的类选择器 --> <div class="father clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body> </html>
法四：overfow法
.father {
margin: 10px auto;
width: 1200px;
background-color: pink;
/* 浮动问题是父级无法被子级撑开
使用overflow: hidden 属性 浏览器就会检查父级范围*/
overflow: hidden;
}
浮动总结
浮动本质是用于图文混排，给图片加浮动，文字会在旁边显示。当时是因为没有更好的技术。所以盒子浮动布局很繁琐，所以就引出了接下来要学的Flex布局
03-Flex布局
由上一节的浮动总结可知为什么浮动被淘汰了。但是我们为什么要学Float布局呢，这是因为浮动为css的定位学习做准备。
Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
float与Flex对比
使用float ：会脱标而且不好控制间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* height: 300px; */
border: 1px solid #000;
}
.box div{
float: left;
/*控制间距*/
margin: 50px;
width: 200px;
height: 100px;
background-color: pink;
}
.bottom{
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</body>
</html>
使用flex ：不脱标而且好控制间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* height: 300px; */
/* 使用flex布局 */
display: flex;
justify-content: space-between;
border: 1px solid #000;
}
.box div{
/* float: left;
margin: 50px; */
width: 200px;
height: 100px;
background-color: pink;
}
.bottom{
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</body>
</html>
Flex组成
设置方式：给父元素设置 display: flex(df即可输出)，子元素可以自动挤压或拉伸
即使子盒子设置了宽度。当元素过多也会被挤压(所以说是弹性盒子)，后面会学不被积压的属性
当子盒子不设置高度 ，子元素可以自动拉伸
组成部分：
- 弹性容器(父盒子)
- 弹性盒子(子盒子)
- 主轴： 默认在水平方向。弹性盒子(子盒子)沿着主轴方向排列
- 侧轴 / 交叉轴：默认在垂直方向
相关属性名
| 描述 | 属性 |
|---|---|
| 创建flex容器 | display:flex |
| 主轴对齐方式 | justify-content |
| 侧轴对齐方式 | align-items |
| 某个弹性盒子侧轴对齐方式 | align-self |
| 修改主轴方向 | flex-direction |
| 弹性伸缩比 | flex |
| 弹性盒子换行 | flex-wrap |
| 行对齐方式(行与行之间)当flex-wrap：wrap生效 | align-content |
创建flex容器 display
| 属性值 | 说明 |
|---|---|
| flex | 块级的弹性盒子 |
| inline-flex | 行级的弹性盒子 |
| -webkit-flex | 苹果和谷歌的兼容性 |
主轴对齐方式 justify-content(弹性容器)
属性名：justify-content
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值, 弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子之间, 两侧盒子贴着两边 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子两侧，两侧盒子与两边有距离 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
justify-content: flex-start;
height: 300px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
根据以上代码 变换justify-content:的值 进行展示
-
justify-content: flex-start;
-
justify-content: flex-end;
-
justify-content: center;
-
justify-content: space-between; 父级剩余的尺寸分配间距，间距相等。
-
justify-content: space-around; 间距出现在弹性盒子两侧，弹性盒子之间的间距是两侧间距的二倍。
-
space-evenly; evenly是均匀地意思，弹性盒子之间的间距 == 两侧间距。
侧轴对齐方式 align-items(弹性容器)和align-self(弹性盒子)
align-items父盒子
- align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置，即给父盒子设置属性）
- align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置，即给子盒子设置属性）
| 属性值 | 效果 |
|---|---|
| stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸) |
| center | 弹性盒子沿侧轴居中排列 |
| flex-start | 弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
这里是给弹性容器添加
-
align-items: stretch;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-day06-练习</title> <style> .box{ display: flex; /* 弹性盒子在侧轴(即垂直方向)没有尺寸才能拉伸 比如下面的.box div注释掉高度 才会拉伸。 浏览器默认是justify-items的值是 stretch;*/ align-items: stretch; height: 300px; border: 1px solid #000; } .box div{ width: 200px; /* height: 100px; */ background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
-
align-items: center;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-day06-练习</title> <style> .box{ display: flex; /* 弹性盒子在侧轴(即垂直方向) 垂直居中 当弹性盒子没有高度按照弹性盒子内容填充的高度*/ align-items: center; height: 300px; border: 1px solid #000; } .box div{ width: 200px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
-
align-items: self-start;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-day06-练习</title> <style> .box{ display: flex; /* 弹性盒子在侧轴(即垂直方向)从起点开始依次排列 当弹性盒子没有高度，按照弹性盒子内容填充高度*/ align-items: self-start; height: 300px; border: 1px solid #000; } .box div{ width: 200px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
-
align-items: self-end;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css-day06-练习</title> <style> .box{ display: flex; /* 弹性盒子在侧轴(即垂直方向)从终点开始依次排列 当弹性盒子没有高度按照内容填充*/ align-items: self-end; height: 300px; border: 1px solid #000; } .box div{ width: 200px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
align-self子元素(弹性盒子)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
align-items: self-start;
height: 300px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
/* 不仅仅是ul下的li可用 */
.box div:nth-child(1){
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<!-- 给第一个盒子单独加 -->
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
修改主轴方向flex-direction(弹性容器)
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
| 属性值 | 效果 |
|---|---|
| row | 水平方向，从左向右(默认) |
| column | 垂直方向，从上向下（注意侧轴主轴交换） |
| row-reverse | 水平方向，从右向左 |
| column-reverse | 垂直方向，从下向上 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
/* 这主轴变侧轴，侧轴变主轴 */
flex-direction: column;
/* 主轴在垂直，视觉效果：垂直居中 */
justify-content: center;
/* 侧轴在水平，视觉效果：水平居中 */
align-items: center;
height: 300px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
}
/* 不仅仅是ul下的li可用 */
.box div:nth-child(1){
background-color: skyblue;
}
.box div:nth-child(2){
background-color: gold;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
弹性盒子换行flex-wrap(弹性容器)
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名：flex-wrap
属性值
- wrap：换行 （弹性盒子不会被挤压）
- nowrap：不换行（默认） 会被挤压(即使弹性盒子设置了宽度也会被挤压)
弹性伸缩比flex(弹性盒子属性重点)
作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。
1 不加flex布局如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
height: 300px;
border: 1px solid #000;
}
.box div{
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
2 加入flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div{
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
3 当第二个弹性盒子加入flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div{
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
/* 水平方向剩余尺寸=
1920px-
第一个弹性盒子宽200px-
第二个弹性盒子内容所占宽度-
第三个弹性盒子内容所占宽度
第二个弹性盒子宽度 = 水平方向剩余尺寸/1
*/
.box div:nth-child(2){
flex:1
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
4 当第二，三个弹性盒子加入flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
/* 默认情况下，当弹性盒子不设置宽高，主轴方向尺寸靠内容撑开，侧轴默认拉伸 */
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div{
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
/* 水平方向剩余尺寸=
1920px-
第一个弹性盒子宽200px-
第二个弹性盒子内容所占宽度-
第三个弹性盒子内容所占宽度
第二个弹性盒子宽度 = 1*水平方向剩余尺寸/(1+2)
第三个弹性盒子宽度 = 2*水平方向剩余尺寸/(1+2)
*/
.box div:nth-child(2){
flex:1
}
.box div:nth-child(3){
flex:2
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
5 加入flex-direction: column; 主轴侧轴反过来
<!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>
/* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
.box {
display: flex;
flex-direction: column;
height: 300px;
border: 1px solid #000;
}
.box div {
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1) {
width: 200px;
}
.box div:nth-child(2) {
flex: 1;
}
.box div:nth-child(3) {
flex: 2;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
行内对齐方式align-content(弹性容器)
属性名：align-content （需要设置父元素的高才生效）
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，，空白间距均匀分在弹性盒子之间, 两侧盒子贴着两边 |
| space-aroud | 弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子两侧，两侧盒子与两边有距离 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
注意：该属性对单行弹性盒子模型无效。
默认结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-day06-练习</title>
<style>
.box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* 这里使用align-content:value */
height: 400px;
border: 1px solid #000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
</div>
</body>
</html>
-
align-content: flex-start;
-
align-content: flex-end;
-
align-content: center;
-
align-content: space-between;
-
align-content: space-space-around;
-
align-content: space-evenly;
flex-flow复合属性：
这个属性是flex-direction 和 flex-wrap复合写法
flex-flow:row nowrap;
flex-flow:column wrap-reverse;
order(默认0)
适用于：flex子项和flex容器中的绝对定位子元素
用整数值来定义排列顺序，数值小的排在前面。可以为负值
flex拓展
flex-grow：拉伸(默认0)
自身收缩数/收缩总和*剩余空间
flex-shrink：收缩(默认1)
(自身宽度自身收缩数)/(sum每个(宽度收缩数))*超出的空间
flex-basis：宽度(默认0)
px：像素值
%：百分值
auto（默认）：无特定宽度值，取决于其它属性值
content：基于内容自动计算宽度
flex：复合写法
flex-grow|flex-shrink|flex-basis
flex:1 1 300px;