【CSS】弹性盒子模型

2022 年 06 月 10 日

22 次浏览

1642字数

1. 把盒子转换为弹性盒子

display: flex;

2. 盒子模型的属性

2.1 把盒子转换为弹性盒子

display: flex;

2.2 是否换行

flex-wrap: wrap;

2.3 控制项目在水平方向上的对齐方式

justify-content: space-between;

2.4 控制项目在垂直方向上的对齐方式

align-items: center;

2.5 在容器有多余的空间的情况之下是否放大

flex-grow: 1;

2.6 在容器放不下的情况之下是否缩小

flex-shrink: 0;

2.7 控制在容器里面垂直方向上的个性化的对齐方式

align-self: flex-end;

3. 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .list {
            width: 1200px;
            height: auto;
            background-color: #f01;
            /**让一个盒子在父级盒子里面水平方向居中：*/
            margin: 20px auto;
            /**把盒子转换为弹性盒子*/
            display: flex;
            /**控制项目是否换行*/
            flex-wrap: wrap;
            /**水平方向上的对齐方式*/
            justify-content: space-between;
        }

        .list>li {
            width: 280px;
            height: 280px;
            background-color: #00f;
            margin-bottom: 20px;
        }

        .list>li.ext {
            height: 0;
        }
    </style>
</head>

<body>
    <ul class="list">
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
        <li>项目4</li>
        <li>项目5</li>
        <li>项目6</li>
        <li>项目7</li>
        <li>项目8</li>
        <li>项目9</li>
        <li>项目10</li>
        <li>项目11</li>
        <li>项目12</li>
        <li>项目13</li>
        <li>项目14</li>
        <li>项目15</li>
        <li>项目16</li>
        <li>项目17</li>
        <li>项目18</li>
        <li>项目19</li>
        <li>项目20</li>
        <li>项目21</li>
        <li class="ext"></li>
        <li class="ext"></li>
    </ul>

</body>

</html>

【CSS】弹性盒子模型