1、弹性盒子模型
弹性盒子是 CSS3 的一种新的布局模式,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间.
2、模型启用
使用display:flex即可将该容器指定为"flex"布局。需要注意的是，容器设置为:"flex"布局后，子元素的"float"，"clear","vertical-align"属性将失效。
3、基本感念
| 属性 | 说明 |
|---|---|
| 容器 | 设置了display:flex属性的元素，被称为容器。 |
| 项目 | 容器内的子元素被称为项目(item) |
| 主轴 | 水平轴线(main axis) |
| 交叉轴 | 垂直的轴线(cross axis) |
| main start | 主轴的开始位置叫main start |
| main end | 主轴的结束位置叫main end |
| cross start | 交叉轴的开始位置叫做cross start |
| cross end | 交叉轴的结束位置叫cross end |
| main size | 单个项目占据的主轴空间叫做main size |
| cross size | 单个项目占据的交叉轴空间叫做cross size |
image.png
4、基本属性
| 属性 | 说明 |
|---|---|
| flex-direction | 主轴的方向,确定弹性子元素排列方式 |
| flex-wrap | 当弹性子元素超出弹性容器范围如何换行 |
| flex-flow | flex-direction + flex-wrap的简写 |
| justify-content | 主轴上的对齐方式 |
| align-items | 交叉轴上的对齐方式 |
| align-content | 交叉轴有空白时，交叉轴的对齐方式 |
4.1 flex-direction
主轴的方向,确定弹性子元素排列方式
| 属性值 | 说明 |
|---|---|
| row (默认值) | 水平从左到右排列 |
| row-reverse | 水平从右到左排列 |
| column | 垂直从上到下排列 |
| column-reverse | 垂直从下到上排列 |
image.png
4.2 flex-wrap
当弹性子元素超出弹性容器范围如何换行
| 属性值 | 说明 |
|---|---|
| nowrap (默认值) | 不换行 |
| wrap | 换行，第一行在上面 |
| wrap-reverse | 换行，第一行在下方 |
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style type="text/css">
.wrap{
width: 200px;
display: flex;
flex-wrap: nowrap;
height: auto;
}
div{
width: 30px;
height: 30px;
border:1px solid red;
margin:5px;
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
nowrap 运行结果：
nowrap运行结果
wrap运行结果：
wrap运行结果
wrap-reverse运行结果：
wrap-reverse运行结果
4.3 flex-flow
该属性是flex-direction和flex-wrap的缩写。
4.4 justify-content
| 属性值 | 说明 |
|---|---|
| flex-start(默认值) | 左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，元素之间的间隔都相等 |
| space-around | 每个元素的两侧都相等 |
** flex-start运行结果**
flex-start运行结果
** flex-end运行结果**
flex-end运行结果
** center运行结果**
center运行结果
** space-between运行结果**
space-between运行结果
** space-around运行结果**
space-around运行结果
