CSS3 - 响应式布局【伸缩布局】

作者: Hyso | 来源:发表于2019-03-24 17:38 被阅读0次

设置为伸缩盒子

display: flex;

当在元素的样式中添加如上属性时，则表明元素为伸缩盒子。

当设置某个元素为伸缩盒子后，其直接子元素将会在一行上显示（未设置为伸缩盒子时，其直接子元素需设置为 float:left; 才能在一行上显示）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #AB1212;
            display: flex;
        }

        .one {
            width: 150px;
            height: 150px;
            background-color: #000000;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: #EDEDED;
        }

        .three {
            width: 150px;
            height: 150px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

为什么在伸缩盒子中，直接子元素会在一行上显示？
1）子元素是按照伸缩盒子中的主轴方向显示的。当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将被自适应。
2）只有伸缩盒子才有主轴和侧轴。主轴：默认水平从左向右显示。侧轴：始终垂直于主轴。

设置伸缩比

问：某一个元素宽度为 577px，此元素中有 N 个直接子元素，如何将这 N 个子元素设置成同等宽度？
答：首先将元素设置为伸缩盒子，然后设置其直接子元素的伸缩比即可。

flex: n;

flex 样式属性用于设置元素的伸缩比。n 的取值为正整数，表示占整个份数中的多少份。整个份数 = 元素的每个直接子元素的 flex 属性值之和。

示例1：将元素分为三等分，其每个直接子元素占其中 1 分，即三分之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 577px;
            height: 100px;
            border: 1px solid #AB1212;
            display: flex;
        }

        .one {
            flex: 1;
            background-color: #000000;
        }

        .two {
            flex: 1;
            background-color: #EDEDED;
        }

        .three {
            flex: 1;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

运行结果：

示例2：将元素分为四等分。其直接子元素 class="one" 和 class="three"占其中 1 分，即四分之一；其直接子元素 class="two" 占其中 2 分，即四分之二；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 577px;
            height: 100px;
            border: 1px solid #AB1212;
            display: flex;
        }

        .one {
            flex: 1;
            background-color: #000000;
        }

        .two {
            flex: 2;
            background-color: #EDEDED;
        }

        .three {
            flex: 1;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

运行结果：

设置伸缩盒子中子元素在主轴方向的对齐方式

justify-content: flex-start|flex-end|center|space-between|space-around;

flex-start：默认值。主轴的开头对齐。
flex-end：主轴的结尾对齐。
center：主轴的中心对齐。
space-between：主轴两端对齐，中间自适应空白空间。
space-around：每个子元素主轴两边留有相同宽度的空白空间。

设置伸缩盒子主轴的方向

flex-direction: row|row-reverse|column|column-reverse;

row：默认值。主轴方向为从左到右。
row-reverse：主轴方向为从右到左。
column：主轴方向为从上到下。
column-reverse：主轴方向为从下到上。

设置伸缩盒子中子元素在侧轴方向的对齐方式

align-items: stretch|center|flex-start|flex-end|baseline;

stretch：默认值。如果子元素未设置高度，则会被沿侧轴方向拉伸。
center：子元素在侧轴中间。
flex-start：侧轴为从上到下显示时，子元素位于侧轴上方。

-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。

设置伸缩盒子中的直接子元素换行显示

flex-wrap: wrap|no-wrap|wrap-reverse;

no-wrap：默认值。不换行显示。
当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将根据伸缩盒子宽度自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #AB1212;
            display: flex;
        }

        .one {
            width: 250px;
            height: 250px;
            background-color: #000000;
        }

        .two {
            width: 250px;
            height: 250px;
            background-color: #EDEDED;
        }

        .three {
            width: 250px;
            height: 250px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

wrap：换行显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap;
        }

        .one {
            width: 250px;
            height: 250px;
            background-color: #000000;
        }

        .two {
            width: 250px;
            height: 250px;
            background-color: #EDEDED;
        }

        .three {
            width: 250px;
            height: 250px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

wrap-reverse：以与 wrap 相反的方向换行显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap-reverse;
        }

        .one {
            width: 250px;
            height: 250px;
            background-color: #000000;
        }

        .two {
            width: 250px;
            height: 250px;
            background-color: #EDEDED;
        }

        .three {
            width: 250px;
            height: 250px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

设置伸缩盒子中换行显示子元素在侧轴方向的对齐方式

align-content: stretch|center|flex-start|flex-end|space-between|space-around;

stretch：默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap;
            align-content: stretch
        }

        .one {
            width: 150px;
            height: 150px;
            background-color: #000000;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: #EDEDED;
        }

        .three {
            width: 150px;
            height: 150px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

        .one {
            width: 150px;
            height: 150px;
            background-color: #000000;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: #EDEDED;
        }

        .three {
            width: 150px;
            height: 150px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

flex-start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .one {
            width: 150px;
            height: 150px;
            background-color: #000000;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: #EDEDED;
        }

        .three {
            width: 150px;
            height: 150px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-end;
        }

        .one {
            width: 150px;
            height: 150px;
            background-color: #000000;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: #EDEDED;
        }

        .three {
            width: 150px;
            height: 150px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

space-between

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }

        .one {
            width: 150px;
            height: 150px;
            background-color: #000000;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: #EDEDED;
        }

        .three {
            width: 150px;
            height: 150px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

space-around

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #AB1212;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .one {
            width: 150px;
            height: 150px;
            background-color: #000000;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: #EDEDED;
        }

        .three {
            width: 150px;
            height: 150px;
            background-color: #EE3030;
        }
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>
</html>

CSS3 - 响应式布局【伸缩布局】

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读