CSS-伸缩布局

原创

一个爱听音乐的程序员 2021-03-23 13:22:00 ©著作权

文章标签 CSS3 html 取值默认值 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者一个爱听音乐的程序员的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            overflow: hidden;
        }

        .one > li {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 20px;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        .two {
            border: 1px solid #000;
            margin: 0 auto;
            list-style: none;
            display: flex;
        }

        .two > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 20px;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }
    </style>
</head>
<body>
<ul class="one">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul class="two">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

主轴方向

在伸缩布局中, 默认伸缩项是从左至右的排版的，主轴的排版的方向默认就是 row, 默认就是从左至右，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: row;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

修改主轴的排版方向为从右至左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: row-reverse;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

告诉系统把主轴的方向改为垂直方向

注意点

默认情况下主轴是水平方向的，但是也可以修改为垂直方向
只要看到flex-direction: column /column-reverse 就代表主轴被修改为了垂直方向
如果将主轴修改为了垂直方向，那么侧轴就会自动从垂直方向转换为水平方向

修改主轴的排版方向为从上至下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: column;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

修改主轴的排版方向为从下至上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: column-reverse;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

主轴对齐方式

属性名	作用
justify-content	用于设置伸缩项主轴上的对齐方式

如果设置为 flex-start, 代表告诉系统伸缩项和主轴的起点对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: flex-start;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

如果设置为 flex-end, 代表告诉系统伸缩项和主轴的终点对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: center;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: space-between;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

环绕对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: space-around;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

侧轴对齐方式

属性名	作用
align-items	修改侧轴的对齐方式

默认情况下是以侧轴的起点对齐，align-items 属性的取值也就是 flex-start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: flex-start;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

align-items 属性的取值是 flex-end 的话也就是相反呗，也就是以侧轴的终点对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: flex-end;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: center;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

注意点

和主轴不同的是, 侧轴没有 两端对齐 和 环绕对齐

基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: baseline;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

拉伸对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: stretch;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

侧轴对齐方式 Two

如果在伸缩容器中通过align-items 修改侧轴的对齐方式, 是修改所有伸缩项侧轴的对齐方式
如果是在伸缩项中通过align-self 修改侧轴的对齐方式, 是单独修改当前伸缩项侧轴的对齐方式
align-self 属性的取值和align-items 一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            align-self: flex-start;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            align-self: center;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            align-self: flex-end;
        }

        ul > li:nth-child(4) {
            background-color: green;
            align-self: stretch;
        }

        ul > li:nth-child(5) {
            background-color: indianred;
            align-self: baseline;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
    <li>s</li>
    <li>b</li>
</ul>
</body>
</html>

主轴侧轴方向问题

默认情况下主轴是水平方向, 侧轴是垂直方向
默认情况下主轴的起点在伸缩容器的最左边, 主轴的终点在伸缩容器的最右边
默认情况下侧轴的起点在伸缩容器的最顶部, 侧轴的终点在伸缩容器的最底部
我们可以通过flex-direction 属性修改主轴的方向
如果flex-direction 属性的取值是column /column-reverse 就代表将主轴的方向修改为了垂直方向, 那么侧轴就会立刻变为水平方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴侧轴方向问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {

        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

换行问题

在伸缩布局中, 如果伸缩容器的宽度不够, 系统会自动压缩伸缩项的宽度, 保证所有的伸缩项都能放在伸缩容器中
如果当伸缩容器宽度不够时, 不想让伸缩项被压缩, 也可以让系统进行换行flex-wrap: wrap;
默认情况下如果伸缩容器的高度比换行之后所有伸缩项的高度还要高, 那么系统会自动将剩余空间平分之后添加给每一行

宽度不够也不换行, 默认取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: nowrap;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

宽度不够换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

规定灵活的伸缩项在必要的时候拆行或拆列，但是会以相反的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap-reverse;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

换行对齐方式

如果伸缩容器中的伸缩项换行了, 那么我们就可以通过 align-content 来设置行与行之间的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            /*
            以起点对齐
            align-content: flex-start;
            以结束点对齐
            align-content: flex-end;
            以居中对齐
            align-content: center;
            以基线对齐
            align-content: space-between;
            以拉伸对齐
            align-content: space-around;
            */
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

默认情况下换行就是拉伸对齐, 一定要注意, 在换行中的拉伸对齐是指, 所有行的高度总和要和伸缩容器的高度一样，所以会将多余的空间平分之后添加给每一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            /*
            默认值。元素被拉伸以适应容器。
            各行将会伸展以占用剩余的空间。
            如果剩余的空间是负数，该值等效于 'flex-start'。
            在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
            */
            align-content: stretch;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项排序

如果想调整伸缩布局中伸缩项的顺序, 那么我们可以通过修改伸缩项的order 属性来实现
默认情况下 order 的取值是 0
如果我们设置了 order 属性的值, 那么系统就会按照设置的值从小到大的排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项排序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            order: -1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            order: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            order: 1;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项放大比例

属性名	作用
flex-grow	当所有伸缩项宽度的总和没有伸缩容器宽度大的时, 我们可以通过 flex-grow 让系统调整伸缩项的宽度, 以便于让所有伸缩项的宽度的总和等于伸缩容器的宽度

flex-grow 计算公式

计算剩余的空间：伸缩容器宽度 - 所有伸缩项的宽度，400 - 300 = 100
计算每份剩余空间的宽度：剩余空间 / 需要的份数，100 / 6 = 16.66
计算每个伸缩项最终的宽度：伸缩项的宽度 + 需要的份数 * 每份的宽度

注意点

flex-grow 的默认值是 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项放大比例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-grow: 1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-grow: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-grow: 3;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项缩小比例

属性名	作用
flex-shrink	当所有伸缩项宽度的总和比伸缩容器宽度大的时, 我们可以通过 flex-shrink 让系统调整伸缩项的宽度, 以便于让所有伸缩项的宽度的总和等于伸缩容器的宽度

flex-shrink 计算公式

计算每个伸缩项需要压缩的宽度：计算溢出的宽度，伸缩容器的宽度 - 所有伸缩项的宽度总和，400 - 600 = -200
计算总权重：每个伸缩项需要的份数 * 每个伸缩项的宽度，1 * 200 + 2 * 200 + 3 * 200 = 1200
计算每个伸缩项需要压缩的宽度, 溢出的宽度 * 需要的份数 * 每个伸缩项的宽度 / 总权重，-200 * 1 * 200 / 1200 = -33.33

注意点

flex-shrink 的默认值是 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项缩小比例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-shrink: 1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-shrink: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-shrink: 3;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项放大缩小比例

如果有伸缩项没有设置flex-grow, 那么系统会保持原有的宽度
而会将多余的宽度等分之后, 按照每个伸缩项需要的份数添加给它们
如果想让某个伸缩项不缩小, 那么需要将它的flex-shrink 设置为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项放大缩小比例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-shrink: 0;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-grow: 1;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-grow: 4;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项宽度

如果是伸缩布局, 除了可以通过元素的 width 属性来设置宽度以外, 还可以通过 flex-basis 属性来设置伸缩项的宽度

注意点

width 属性可以设置宽度 / flex-basis 也可以设置宽度
那么如果两者同时存在, 系统会听 flex-basis 的
flex-basis 属性是专门提供给伸缩布局使用的
如果同时通过这两个属性设置了宽度, 但是其中一个是 auto, 那么系统会按照具体值来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项宽度</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-basis: 100px;
            width: auto;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-basis: 200px;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-basis: 300px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项属性简写

flex: flex-grow flex-shrink flex-basis;

默认值：flex: 0 1 auto;

注意点

在连写格式中, flex-shrink、flex-basis 是可以省略的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项属性简写</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex: 1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex: 3;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

上一篇：CSS-线性渐变与径向渐变

下一篇：CSS-媒体查询

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯