美文网首页
CSS3 - 响应式布局【伸缩布局】

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弹性盒flex布局模型

    响应式布局：CSS3弹性盒flex布局模型

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

    设置为伸缩盒子 当在元素的样式中添加如上属性时，则表明元素为伸缩盒子。 当设置某个元素为伸缩盒子后，其直接子元素将...

  • 第10章 布局样式相关-伸缩布局（Flexible Box）

    伸缩布局（一） CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box）...

  • 无标题文章

    响应式 布局系统 优先级 css3动画 动画性能 布局（三栏） 栅格化布局 flexbox布局 硬件加速问题 BF...

  • CSS3之Flexbox布局在ReactNative的应用

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，被成为弹性布局（或者伸缩布局）。相比...

  • CSS3-伸缩布局

    CSS3在布局方面做了非常大的改进，使得对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开...

  • 移动Web的开发布局

    移动Web的开发方式分为流式布局（即百分比布局）、伸缩布局和响应式布局。 （一）多倍图 设计多倍图，根据不同手机的...

  • 响应式布局目录

    └─Web响应式布局├─1 响应式布局介绍├─2 响应式布局实例(Media Queries模块) 上├─3 响应...

  • web响应式布局

    随着css3的诞生，近几年web响应式布局越发流行，虽然从电脑端到手机端的响应式布局。在正真的用户使用上作用不大（...

  • 学习CSS3伸缩布局盒模型Flex布局

    一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexibl...

网友评论

      本文标题：CSS3 - 响应式布局【伸缩布局】

      本文链接：https://www.haomeiwen.com/subject/cvuuvqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS3 - 响应式布局【伸缩布局】|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！