弹性盒子：flex布局
- 弹性盒子是一种布局方式
- 特点：改变元素的排列方式
- 采用flex布局的元素：称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（简称“项目”）
- 弹性盒子中的项目可以是块级元素、行内元素、行内块级元素
- 并且行内元素在弹性盒子中可以设置宽高
- display:inline-flex ：转成行内弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 400px; height: 400px; background: bisque;
margin: 50px auto; overflow: hidden;
/* 转成弹性盒子 */
display: flex;
}
.zxw{
width: 120px; height: 50px; line-height: 50px;
background: red; text-align: center; color: #fff;
margin-top: 10px;
}
</style>
</head>
<body>
<ul class="box">
<li class="zxw">zxw1</li>
<li class="zxw">zxw2</li>
<li class="zxw">zxw3</li>
</ul>
</body>
</html>
主轴、交叉轴方向
x轴称为主轴；y轴称为交叉轴
flex-direction:row | column | row-reverse | column-reverse;：定义弹性元素排列方向及顺序
- row：默认值；表示主轴是水平正向
- column：表示主轴是垂直正向
- row-reverse：表示主轴是水平方向
- column-reverse：表示主轴是垂直方向
换行、及换行方式
flex-wrap: nowrap | wrap | wrap-reverse;：定义是否换行，换行方式都是交叉轴方向
- nowrap：默认值；不换行
- wrap：换行；默认交叉轴正向换行
- flex-wrap：换行；交叉轴反向换行
主轴方向对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;：子元素在主轴方向上的对齐方式
- flex-start：默认值；开始方向对齐
- flex-end：结束方法对齐
- center：居中对齐
- space-between：两端对齐，项目之间的间隔都相等
- space-around：项目会平均地分布在行里，两端保留项目与项目之间间距大小的一半
交叉轴方向对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;：子元素在交叉轴方向上的对齐方式
- flex-start：开始方向对齐
- flex-end：结束方法对齐
- center：居中对齐
- baseline：项目的第一行文字的基线对齐
- stretch：默认值；如果项目没设置高度或设为auto，将占满整个容器的高度
多行内容在交叉轴上对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around | stretch;：多行子元素在交叉轴方向上的对齐方式
- flex-start：开始方向对齐
- flex-end：结束方法对齐
- center：居中对齐
- space-between：两端对齐，项目之间的间隔都相等
- space-around：项目会平均地分布在行里，两端保留项目与项目之间间距大小的一半
- stretch：默认值；会拉伸容器内每一个项目占用空间，填充方式为给每个项目下方增加空白，占满整个交叉轴
设置弹性元素的顺序
order：默认值0
- 元素按照order属性的值增序进行布局
- 值越小排列越靠前，拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局
弹性元素的扩展比率
flex-grow:0：默认值为0；设置弹性元素的扩展比率来分配剩余空间
弹性元素的收缩比率
flex-shrink:1：默认值为1；设置弹性元素的收缩比率来收缩空间
- 多出来的尺寸
- 总权重：元素1尺寸 * 收缩比率 + 元素2尺寸 * 收缩比率…
- 收缩空间：元素尺寸 * 收缩比率 * 多出来的尺寸 / 总权重
最大和最小宽高度
max-width：定义元素最大宽度
该属性值会对元素的宽度设置一个最大限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值
min-width：定义元素最小宽度
该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值
max-height：定义元素最大高度
该属性值会对元素的高度设置一个最大限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值
min-height：定义元素最小高度
该属性值会对元素的高度设置一个最小限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值