携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
弹性布局的概念
- 现代Web开发要求，网页应该尽 量适应不同显示设备的大小要求， 灵活显示网页内容。
- 这就要求，网页内容要可以随显 示设备的大小而动态调整布局。
- 前面学过的浮动定位float属性， 的确可以实现根据显示设备大小， 自动换行显示。但是，浮动定位 float提供的可控制的属性太少了， 以至于难于随心所欲的控制布局。
容器、弹性布局的项目、主轴、交叉轴
如果主轴是x轴，那么y轴就是交叉轴。
反之，如果主轴是y轴，那么x轴就是交叉轴。
容器的属性
设置父元素为flex容器
- 弹性布局的父元素独占布局中的一行，就要设置 父元素的display属性为flex
- 如果希望弹性布局的父元素显示为行内元素特征， 与其它元素同在一行内，可设置父元素的display属 性为inline-flex。
flex容器父元素的属性
- flex-direction属性
- flex-wrap属性
- flex-flow 属性
- justity-content 属性
- align-items 属性
（1）flex-direction 指定容器的主轴及其排列方向
-
属性值包括：
-
row，默认值，即主轴是x轴，项目从最左端开始向右排列
-
row-reverse，表示项目从最右侧开始，从右向左排列
但是!注意项目的顺序在编写时虽然是12345，但是经过 reverse反转后，实际排列的顺序变为54321
-
column，主轴是y轴，项目从顶端开始，从上向下排列
-
column-reverse, 主轴是y轴，项目从底部向上排列
-
（2）flex-wrap 主轴排列不下时，是否换行
- 属性值包括
- nowrap，默认值，表示空间不够时，也不换行，项目自动缩 小;比如，移动端网页的底部有一个占满整个宽度的导航条， 并且导航条内的弹性布局项目
- wrap，表示当内容放不下时应该换行显示
（3）flex-flow 可同时设置flex-direction和flex-wrap两个属性
- 语法格式： flex-flow: flex-direction flex-wrap（两个值之间用空格分割）
- 默认值：“flex-flow: row nowrap” 默认值，表示 主轴是x轴，起点在左端，并且空间不够 时，也不换行，项目自动缩小
（4）justify-content 定义在主轴上的对齐方式
- 属性值
- flex-start，表示以主轴的起点对齐
- flex-end，表示以主轴的终点对齐
- center，表示在主轴上居中对齐
- space-between，表示两端对齐
- space-around，表示每个项目两端间距相同
（5）align-items属性
- 属性值
- flex-start，表示让项目以交叉轴的起点方向对齐
- flex-end，表示让项目以交叉轴的终点方向对齐
- center，表示让项目以交叉轴的中线居中对齐
- baseline，表示让项目以交叉轴的基线对齐
- stretch，表示如果项目未设置尺寸，就让项目在交叉轴上占满所有 空间。
项目属性
（1）order
- order属性，专门定义项目的排列顺序。
- 其值为整数数字，无需单位。
- 值越小，越靠近起点，默认值是0。
（2）flow-grow 定义项目的放大比例，默认0，不放大，
- flex-grow属性，专门定义项目的放大比例。
- 如果容器有足够的空间，项目可以放大。
- 其值为整数数字，无需单位（Number类型）
- 默认情况，项目不放大
- 取值越大，占据剩余的空间越多
（3）flex-shrink 缩小比例， 默认为1，表示空间不足时，等比缩小，为0（不缩小）
- flex-shrink属性，专门定义项目的缩小比例。
- 如果容器空间不足时，项目可以缩小
- 缩小的比例取决于flex-shrink的值
- 其默认值为1，表示空间不足时，则等比缩小
- 可改为0，表示不缩小
（4）align-self 定义某一个项目在交叉轴上的对齐方式
- align-self属性，专门单独定义某一个项目在交叉轴上的对齐方式。
- 与align-items属性对比
- align-items定义在父容器上约束所有项目的统一对齐方式
- align-self定义在项目上，只约束当前所在的一个项目。
- 其取值和align-items完全一样。只是多了一个auto值，表示继承父元素的align-items效果。
