这是我参与「第四届青训营 」笔记创作活动的的第1天
1. 概述
-
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
-
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。
-
一种新的排版上下文 FFC
-
它可以控制子级盒子的：
- 摆放的流向 ( → ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
2. 容器的主轴
介绍主轴和侧轴
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由
flex-direction定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关，所以有必要在一开始首先理解它。
flex-direction
主轴由
flex-direction定义用于改变摆放的流向(主轴的方向)
| 属性值 | 介绍 |
|---|---|
| row | 行方向，从左到右 |
| row-reverse | 行方向，从右到左 |
| column | 列方向，从上到下 |
| column-reverse | 列方向，从下到上 |
flex-wrap
flex容器中的子元素默认是不换行的，当子元素无法在一行上完全显示时，子元素会平均容器宽度进行显示，可以使用
flex-wrap: wrap，来使其进行换行，保证正常的宽度。
不换行
换行
flex-flow 简写属性
可以将两个属性
flex-direction和flex-wrap组合为简写属性flex-flow。第一个指定的值为flex-direction，第二个指定的值为flex-wrap.如
flex-flow: row wrap指定主轴方向和是否换行
3. 设置主侧轴元素的对齐方式
justify-content 改变主轴元素的对齐方式
| 属性值 | 介绍 |
|---|---|
| flex-start | 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。 |
| flex-end | 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。 |
| center | 伸缩元素向每行中点排列。 |
| space-between | 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 |
| space-around | 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 |
| space-evenly | 相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。 |
align-items 改变侧轴元素的对齐方式
| 属性值 | 介绍 |
|---|---|
| flex-start | 元素向侧轴起点对齐。 |
| flex-end | 元素向侧轴终点对齐。 |
| center | 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。 |
| stretch | 弹性项包含外边距的交叉轴尺寸被拉升至行高 |
| baseline | 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。 |
align-self 作用于子元素，覆盖
align-items的值，改变自身在侧轴的对齐方式注意：align-self 属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略
align-self。
4. 容器中flex元素-Flexibility 弹性能力
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-basis 没有伸展或收缩时的基础长度
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度
flex-basis定义了该元素的空间大小，flex 容器里除了元素所占的空间以外的富余空间就是可用空间 。 该属性的默认值是auto。此时，浏览器会检测这个元素是否具有确定的尺寸。
flex-grow 有剩余空间时的伸展能力
flex-grow若被赋值为一个正整数， flex 元素会以flex-basis为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。
flex-shrink 容器空间不足时收缩的能力
flex-grow属性是处理 flex 元素在主轴上增加空间的问题，相反flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
flex属性的简写
flex：flex-grow flex-shrink flex-basis
| 合并 | 展开 |
|---|---|
| flex: 1 | flex-grow: 1 |
| flex: 100px | flex-basis: 100px |
| flex: 2 1 | flex-grow: 2; flex-shrink: 1 |
| flex: 1 100px | flex-grow: 1; flex-basis: 100px |
| flex: 2 0 100px | flex-grow: 2; flex-shrink: 0; flex-basis: 100px |
| flex: auto | flex: 1 1 auto |
| flex: none | flex: 0 0 auto |
5. 改变容器中单个子元素的排列顺序
order 作用于子元素
order属性旨在按顺序排列子元素。为order赋值整数（可为负数）。然后，按照该整数（从小到大）排列子元素。如果多个子元素具有相同的整数值，则在该组中按照源顺序对子元素进行布局。
6. 示例
水平伸缩栏
<!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>test nav</title>
<style>
.nav {
display: flex;
width: 100%;
height: 60px;
margin: auto;
justify-content: space-evenly;
align-items: center;
border-radius: 4px;
border: 1px solid #DCDFE6;
}
.nav div {
flex: 1;
height: 48px;
line-height: 48px;
border-radius: 8px;
margin: auto 4px;
text-align: center;
cursor: pointer;
color: #FFFFFF;
background-color: #909399;
}
.nav div:hover{
background-color: #409EFF;
box-shadow: 2px 4px 4px #dddddd;
}
</style>
</head>
<body>
<div class="nav">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
