弹性盒模型

弹性盒模型

介绍：弹性盒模型是一种更加先进的开发模式，相比较于之前更加简单有效，可以对一个元素的子元素进行排列、对齐、分配空间，主要用于网页布局、移动端、小程序、平板等界面；

使用 display:flex 开启弹性盒模型，注意是父级控制子级，需要在父级进行设置；

一、特征：

1、会将所有的元素并排成一行，自动分配空间（如果子元素的大小超过父级的大小，会等比例缩小）；

2、子级的宽度不写为零，由内容撑开；

3、子级高度不写，会默认继承父级100%的高度；

.box{
            width: 800px;
            height: 800px;
            margin: 100px auto;
            border: 1px solid red;
            /* 使用display:flex开启盒模型 */
            display: flex;
}
.box li{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
}

<ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ul>

二、主轴方向

使用flex-direction控制主轴方向，默认从左向右

/* 默认从左向右 */
flex-direction: row;

/* 从右向左 */
flex-direction: row-reverse;

/* 从上向下 */
flex-direction: column;

/* 从下向上 */
flex-direction: column-reverse;

 三、交叉轴换行

前提：子元素的宽度要大于父级的宽度才会进行换行；

/* 换行 */
flex-wrap:wrap;

/* 不换行 */
flex-wrap:nowrap;

/* 反方向换行 */
flex-wrap:wrap-reverse;

使用flex-wrap:wrap进行换行，换行的方向为交叉轴方向，交叉轴方向由主轴方向确定，始终与主轴方向垂直

.box{
            width: 800px;
            height: 800px;
            margin: 100px auto;
            border: 1px solid red;
            display: flex;
            /* 主轴方向默认从左向右 */
            flex-direction: row;
            /* 设置交叉轴换行 */
            flex-wrap: wrap;
}
.box li{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
}

<ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

flex-wrap: wrap-reverse;

 控制主轴方向和交叉轴换行复合写法

flex-flow: row wrap;

/* 相当于

flex-direction: row;
flex-wrap: wrap;

 */

四、主轴的多行控制对齐

通过设置justify-content样式控制主轴的多行对齐方式

1、开始位置对齐

由于主轴方向从左向右，开始位置在左边，所以向左对齐；

justify-content: flex-start;

2、结束位置对齐

由于主轴方向从左向右，终点位置在右边，所以向右对齐；

justify-content: flex-end;

3、居中对齐

justify-content: center;

4、两端对齐

子元素之间留有空隙

justify-content: space-between;

5、两端居中对齐

justify-content: space-around;

五、交叉轴的多行样式控制

使用align-content控制，与主轴类似，有以下几个样式：

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

六、单行样式

使用align-items控制单行样式，只生效单行；

/* 单行初始位置对齐 */
align-items: flex-start;

/* 单行终点位置对齐 */
align-items: flex-end;

/* 单行居中对齐 */
align-items: center;

/* 单行基线对齐 */
align-items: baseline;

七、单个元素样式

注意：单个元素样式要写在子级元素中

/* 单个元素初始位置对齐 */
align-self: flex-start;

/* 单个元素终点位置对齐 */
align-self: flex-end;

/* 单个元素居中对齐 */
align-self: center;