弹性盒模型

弹性盒模型

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

使用 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控制主轴方向࿰