学习笔记——使用弹性布局

---

弹性布局：为盒模型提供了较大的灵活性

定义：任何盒子设置了display属性为flex，则该盒子本身开启了弹性布局。webkit内核的浏览器则需要加-webkit前缀。

弹性容器：display属性设置为flex的盒子。

弹性项目：弹性容器的子元素（孙子元素不包括在内）。

“主轴”和“交叉轴”是弹性容器内存在的两个轴，它们永远是垂直的。

---

弹性容器中的属性设置及其表现：

1.设置display: flex开启弹性布局

2.设置flex-wrap: nowrap（默认值） | wrap（换行） | wrap-reverse（换行但方向翻转）

如果弹性项目在主轴上放不下时，是否允许换行（是否允许出现多根主轴）。

                    

3.设置flex-direction: row（默认）| row-reverse | column（按列正方向） | coulmn-reverse

控制弹性容器内部主轴的方向。

                                 

4.设置justuify-content: flex-start（默认）| flex-end（从结尾开始） | center | space-between（与交叉轴两端对齐，间隔平均分布） | space-around（每个盒子两侧间隔相同）

弹性项目在主轴上的对齐的方式。

                                   

5.设置align-items: stretch（默认） | flex-start | flex-end | center | baseline

弹性项目在交叉中上的对齐方式。

                                      

6.设置align-content: stretch（默认）| flex-start | flex-end | center | space-between | space-around

当弹性容器内存在多根主轴时，多根主轴在交叉轴上的对齐方式。

                              

          

弹性项目中的属性设置及其表现：

1. 设置flex-grow: 0（默认）| 正整数

当主轴方向还存在剩余空间，弹性项目如何瓜分（按比重）。

2.设置flex-basis: auto（默认）| 任意有效长度

设置弹性项目参与主轴剩余空间计算的数值。

3.设置flex-shrink: 1 | 正整数

当主轴上放不下弹性项目时，如何进行收缩。

4.设置flex: 一个值 | 两个值 | 三个值 | 关键字（none: 0 0 auto, auto: 1 1 auto） | 默认值（0 1 auto）

对flex-grow|flex-shrink|flex-basis的合并设置。一般情况下建议使用flex一起设置弹性项目属性，因为浏览器会推算相应的值。

 

5.设置align-self: inherit（默认）| stretch | flex-start | flex-end | center

设置弹性项目自身在交叉轴上的位置。会覆盖弹性容器中设置的align-items。

6.设置order：整数

决定弹性项目的摆放顺序。

总结：开启弹性布局后，弹性项目不需要讨论是什么类型的盒子了，弹性项目具有包裹性，设置宽高有效。也不要设置浮动和清除浮动，这对弹性项目无效，当然设置vertical-align之类的也无效。定位还可以使用，弹性项目也可以再作为弹性容器开启弹性布局。