CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置** display 属性的值为 flex 或 inline-flex**将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
使用 （盒子分主轴（x）和副轴（y））
属性描述
flex复合属性。设置或检索伸缩盒对象的子元素如何分配空间。flex-grow设置或检索弹性盒的扩展比率。flex-shrink设置或检索弹性盒的收缩比率flex-basis设置或检索弹性盒伸缩基准值。flex-flow复合属性。设置或检索伸缩盒对象的子元素排列方式。flex-direction设置或检索伸缩盒对象的子元素在父容器中的位置。flex-wrap设置或检索伸缩盒对象的子元素超出父容器时是否换行。align-content设置或检索弹性盒堆叠伸缩行的对齐方式。align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。align-self设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。order设置或检索伸缩盒对象的子元素出現的順序。
给哪个元素设置 display: flex; 代表的是他的子元素使用弹性布局给元素使用弹性布局之后 会让他的子元素沿着主轴方向依次排列
默认的主轴方向是x轴
弹性布局的特点 : 保证了子元素在父元素的主轴方向永远不会溢出 会自动伸缩
弹性布局也叫作伸缩布局
现有页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
<style>
ul {
list-style: none;
padding: 0;
width: 600px;
height: 500px;
border: 1px solid black;
}
li {
width: 150px;
background-color: #0f0;
}
</style>
</head>
<body>
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
</ul>
</body>
</html>
不用浮动把三个li盒子并排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
<style>
ul {
list-style: none;
padding: 0;
width: 600px;
height: 500px;
border: 1px solid black;
display: flex;
justify-content: space-around;
}
li {
width: 150px;
background-color: #0f0;
}
</style>
</head>
<body>
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
</ul>
</body>
</html>
让它纵向排列
<style>
flex-direction: column;
</style>
