0基础CSS超详细笔记 第六天

Flex 布局————(Flexible box)————灵活性的，有弹性的。        

        注意：

                

1. 每个弹性容器都有两根轴：**主轴和交叉轴**，两轴之间成90度关系。注意：**水平的不一定就是主轴。**
2. 每根轴都有**起点和终点**，这对于元素的对齐非常重要。 
3. 弹性容器中的所有子元素称为<弹性元素>，**弹性元素永远沿主轴排列**。
4. 弹性元素也可以通过`display:flex`设置为另一个弹性容器，形成嵌套关系。因此**一个元素既可以是弹性容器也可以是弹性元素**。

弹性容器的两根轴非常重要，所有属性都是作用于轴的。

        flex 布局属性：（容器属性）：

                        （display：flex）

                

                1. flex-direction（修改主轴的方向）：row（默认）,row-reverse（行—逆主轴），column，column-reverse

                2. flex-wrap（换不换行，若不换行，则弹性盒子等比例缩放）:no-wrap（默认，不换行，即，默认等比例缩放）,wrap（换行）,wrap-reverse

                3.flex-flow（主轴方向和换行的简写。）：

                        flex-flow：row wrap；

                4. justify-content（控制元素在主轴上的对齐方式）：flex-start，flex-end（右对齐），center,space-between（两端贴紧盒子，中间两个盒子距离相等），space-around（元素之间的距离是，元素和两边距离的两倍）, space-evenly（平分间距）。

                5.align-items（在交叉轴上的对齐方式）：stretch（默认，元素没有设置高度，则默认占满整个父盒子。），flex-start，flex-end，center，space-between，space-around，space-evenly，

                6.align-content （多行时的元素）

项目属性：（以上是容器属性，项目属性是设置给项目的，即，子元素的）

                1.order（越大越靠后，默认0）

                2.flex-grow（默认0，当项目元素未占满父元素时，是否放大。 只有一个元素设置1时，该元素自己占满整个空间。有N个元素设置1时，均分成N份，剩余空间再均分给设置1的项目元素。）

                3.flex-shrink（默认1，决定当空间不足时，项目元素会不会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。 ）

                4.flex-basis（默认auto，用于设置项目元素的宽度。优先级比width高。）

                5.flex（简写）：flex： flex-grow flex-shrink flex-basis

                6.align-self（默认auto，表示继承父容器的align-items属性。如果没父元素，则默认stretch。用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。 ）