学习目标：弹性布局案列
- 了解弹性布局
- 使用弹性布局
- 仿写案例
一、弹性布局（什么是弹性布局）
-
弹性盒子
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。
-
弹性容器：需要添加弹性布局的父元素；
-
弹性子元素：弹性布局容器中的子元素，也称为项目；
- 主轴（main axis）：在弹性布局中，我们会通过属性的规定水平或垂直方位为主轴【X/Y轴】；
- 交叉抽（cross axis）：垂直与交叉轴的另一条轴（可理解为就是主轴的垂线）
弹性布局示例
<body>
<style>
.box {
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
为父元素添加弹性布局
关键代码： display: flex;
<body>
<style>
.box {
display: flex;
/*将父元素改为弹性容器 flex*/
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
运行结果
二、弹性布局的属性
1. 作用在父容器上的属性
这个表格很重要，不要求背下来，但是一定要多看！多看！多看！
| 值 | 描述 |
|---|---|
| flex-direction | 指定弹性容器中子元素排列方式 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction和flex-wrap的简写 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向的对其方式 |
| align-items | 设置弹性盒子元素在侧轴（纵轴方向的对其方式） |
| align-content | 修改flex-wrap属性的行为，类似于align-items，但不是设置元素对齐，而是设置行对齐 |
1-1. flex- direction 属性
flex- **direction属性是用来指定弹性容器中子元素排列方式，它决定了主轴的方向。
| 值 | 描述 |
|---|---|
| row（默认值） | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
| column | 主轴为垂直方向，起点在上沿 |
| column-reverse | 主轴为垂直方向，起点在下沿 |
1-2. flex-wrap 属性
flex-wrap 属性规定flex容器是单行还是多行，同时横轴(X轴)的方向决定了新行堆叠的方向。flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行。
| 值 | 描述 |
|---|---|
| nowrap（默认值） | 当容器宽度不够时，每个项目的会被挤压宽度排在一行 |
| wrap | 换行，并且第一行在容器的最上方 |
| wrap-reverse | 换行，并且第一行在容器的最下方 |
I . nowrap（默认值）值
II . wrap值
wrap 换行，并且第一行在容器的最上方
III . wrap-reverse值
换行，并且第一行在容器的最下方
1-3. flex-flow属性
flex-flow是flex-direction和flex-wrap的缩写形式，默认值为： flex-flow：row nowrap；(最常用)
- flex-direction：row（默认值）|row-reverse|column|column-reverse；
- flex-wrap：nowrap（默认值）|wrap|wrap-reverse；
1-4. justify-content属性
| 值 | 描述 |
|---|---|
| flex-start（默认） | 子元素位于主轴起点 |
| flex-end | 子元素位于主轴终点 |
| centent | 居中 |
| space-between | 两端对其，项目之间的间隔都相等。（开头和最后的项目，与父容器没有间隔） |
| space-around | 每个项目两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍（开头和最后的与父容器边缘有一定的间隔） |
1-5 .align-items属性
设置弹性盒子元素在侧轴（纵轴方向的对其方式）
| 值 | 描述 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| centent | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐（文字的高度、字体大小会影响每行的基线）。 |
| strech（默认值） | 如果项目未设置高度或设为auto，将占满整个容器的高度。 |