CSS3 伸缩布局(flex) (可用于屏幕适配)

最新推荐文章于 2024-04-21 17:44:16 发布

houyanhua1

最新推荐文章于 2024-04-21 17:44:16 发布

阅读量531

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79676308

版权

CSS 同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

HTML5

55 篇文章 1 订阅

订阅专栏

CSS3

34 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
        .box {
            width: 900px;
            margin: 50px auto;
            border: 1px solid #000;
        }

        .box ul {
            list-style: none;
            height: 500px;
            padding: 5px;
            display: flex;   /* 伸缩布局 相当于所有子元素浮动,但不用清除浮动 */
            flex-direction: row-reverse;   /* 设置主轴(水平)方向(子元素排列次序) row(从左到右,左浮动(默认)) row-reverse(从右到左,右浮动) column(从上到下) column-reverse(从下到上) */
            justify-content: space-between;    /* 主轴(水平)对齐方式 flex-end(向最后子元素对齐) center flex-start space-around(在整个盒子中平分(屏幕适配)) space-between(两端对齐,中间平分) */
            align-items: center;  /* 侧轴(竖直方向)对齐方式 flex-start flex-end center baseline(基线) stretch(子元素高度拉伸,"height:auto;") */
        }

        .box ul li {
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: pink;
        }

        .box ul li:nth-child(1) {
            flex: 1;  /* 在父盒子中的比例(宽高会改变),不设置会按本身的宽高显示 */  /* 子盒子之间的margin不会合并 */
        }

        .box ul li:nth-child(2) {
            flex: 4;  /* 在父盒子中的比例 */
        }

        .box ul li:nth-child(3) {
            flex: 1;  /* 在父盒子中的比例 */
        }

     </style>
 </head>
 <body>
     <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
     </div>
 </body>
 </html>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 伸缩布局(flex) (可用于屏幕适配)

demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box {
复制链接

扫一扫