zoukankan      html  css  js  c++  java
  • flex的justify-content

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .outer{
                 800px;
                border: 2px solid red;
                line-height: 100px;
                text-align: center;
                /* 设置元素为弹性容器 */
                display: flex;
                /* justify-content 分配主轴上的空白空间
                        flex-start 元素沿主轴起边排列
                        flex-end 元素沿主轴的终边排列
                        center 元素居中排列
                        space-around 空白分布到元素两侧
                        space-evenly 空白分布到元素的单侧
                        space-between 空白均匀分布到元素间   */
                justify-content: space-between;
            }
            .outer div{
                 200px;
                height: 100px;
                background-color: burlywood;
                /* 指定弹性元素的收缩系数
                  0表示不收缩 */
                /* flex-shrink: 0; */
                
            }
            .outer .box2{
                background-color: chartreuse;
            }
            .outer .box3{
                background-color: darkgoldenrod;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="box1">111</div>
            <div class="box2">222</div>
            <div class="box3">333</div>
        </div>
    </body>
    </html>
  • 相关阅读:
    最新国家标准下载(2020-7-31)
    SL/T 264-2020 水利水电工程岩石试验规程
    SH/T 3082-2019 石油化工仪表供电设计规范
    GB/T 4780-2020 汽车车身术语
    Java——冒泡排序
    JSP处理XML数据
    JSP标准标签库(JSTL)
    千锤百炼软工第十九天
    千锤百炼软工第十八天
    千锤百炼软工第十七天
  • 原文地址:https://www.cnblogs.com/kukai/p/12339651.html
Copyright © 2011-2022 走看看