CSS 布局之 flex

flex 布局

    flex的几个核心概念

        主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

        侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

        方向：默认主轴从左向右，侧轴默认从上到下

        通过 flex-direction 来设定主轴和侧轴。

flex应用：

        1）、指定一个盒子为伸缩盒子 display: flex

        2）、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

        3）、明确 主侧轴 及 方向

        4）、可互换主侧轴，也可改变方向

       A    flex-direction调整主轴方向（默认为水平方向）

            该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

            row水平方向

            reverse-row反转

            column垂直方向

            reverse-column反转列

        ①伸缩布局display:flex  默认是 水平

display:flex

显示效果

             ② 伸缩布局display:flex  设置主轴方向

设置主轴方向

设置主轴方向

                    ③ 伸缩布局flex-direction: row-reverse

flex-direction: row-reverse

显示效果

                        ④ 伸缩布局 flex-direction: column-reverse;

flex-direction: column-reverse;

主轴反转

            B    justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

                    flex-start  起点对齐

                    flex-end 终点对齐

                    center 中间对齐

                    space-around 环绕

                    space-between 两端对齐

                    ① 主轴对齐方式  justify-content: flex-start;

主轴对齐方式

 justify-content: flex-start

                ② 主轴对齐方式  justify-content: flex-end

 justify-content: flex-end

 justify-content: flex-end

                   ③ 主轴对齐方式 justify-content: center;

 justify-content: center

 justify-content: center;

                                         ⑧ 主轴对齐方式 justify-content:space-around

justify-content:space-around

justify-content:space-around

                   ④ 主轴对齐方式  justify-content:space-between

 justify-content:space-between

 justify-content:space-between

                C    align-items设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

                        flex-start、起点对齐

                        flex-end、终点对齐

                        center中间对齐

                        Strethc:拉伸;

                ① 侧轴对齐方式 align-items ：flex-start（默认）

align-items ：flex-start

 align-items ：flex-start

                            ② 侧轴对齐方式 align-items ：flex-end

align-items ：flex-end

align-items ：flex-end

                ③ 侧轴对齐方式 align-items ：center

align-items ：center

align-items ：center

                ④  侧轴对齐方式 align-items ：stretch

align-items ：stretch

 align-items ：stretch

                D   flex控制子项目的缩放比例

                    不指定flex属性，则不参与分配

                        ① 子元素缩放比例 flex:1

子元素缩放比例

 flex:1

                     ② 子元素缩放比例 flex:1：6：1

 子元素缩放比例 

 子元素缩放比例 

                  ③ 子元素缩放比例 一个元素定宽，剩下的自动按比例分

flex: 200px 1:3

flex: 200px 1:3

            flex-wrap:wrap 让弹性盒元素在必要的时候拆行

                宽度不够时候，自动换行