flex布局

flex布局（伸缩盒布局）

目录

flex布局（伸缩盒布局）

1、flex布局的介绍

2、flex布局和传统布局的比较

3、设置flex布局

4、常见的父项元素

 flex-direction                设置主轴的方向

 justify-content              设置主轴上的子元素排列方式

 flex-wrap                      设置子元素是否换行

​ align-item                     设置侧轴上的子元素排列方式

1、flex布局的介绍

        伸缩盒布局是一种当页面需要适应不同屏幕大小以及不同设备类型时确保元素放置恰当的布局方式。弹性布局可以提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空间。

2、flex布局和传统布局的比较

        传统布局：兼容性好，布局繁琐，具有局限性，不能在移动端很好的布局

        flex布局：兼容性差，布局简单，没有局限性，移动端应用广泛

3、设置flex布局

        在父元素设置display:flex;

4、常见的父项元素

        flex-direction                设置主轴的方向

                          row                     默认值，主轴方向为水平方向，起点在左端

flex-direction: row;

                          row-reverse           主轴方向为水平方向，起点在右端

flex-direction: row-reverse;

                         column                   主轴方向为垂直方向，起点在上方

flex-direction: column;

                         column-reverse     主轴方向为垂直方向，起点在下方

flex-direction: column-reverse;

        justify-content                设置主轴上的子元素排列方式

                        flex-start                  左对齐

justify-content:flex-start;

                         flex-end                 右对齐

justify-content:flex-end;

                       center                     居中

justify-content:center;

                       space-between       两端对齐

justify-content:space-between;

                        space-around        每个项目两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍

justify-content:space-around;

        flex-wrap                         设置子元素是否换行

                        nowrap                   默认，不换行

flex-wrap: nowrap;

                        wrap                       换行，第一行在上方

flex-wrap: wrap;

                        wrap-reverse          换行，第一行在下方

flex-wrap: wrap-reverse;

        align-items                      设置侧轴上的子元素排列方式

                        flex-start                 与交叉轴的起点对齐

align-items: flex-start;

                         flex-end                 与交叉轴的终点对齐

align-items: flex-end;

                         center                    与交叉轴的中点对齐

align-items: center;

                        baseline                 与项目的第一行文字的基线对齐

align-items: baseline;

---