zoukankan      html  css  js  c++  java
  • 弹性盒子 flex-direction

      使用弹性盒子可以更方便的对页面内容进行布局

      flex-direction指定了子元素在父元素盒子中的排列方式

      1.flex-direction:row

        flex默认排列方式,从左到右排列,左对齐

      2.flex-direction:row-reverse

        与row反向,从右向左排列,右对齐,第一个在最右边

      3.flex-direction:column

        从上到下依次排列,向上对齐

      4.flex-direction:column-reverse

        与column相反,从下到上对齐,第一个在最下面

      说明:HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <link rel="stylesheet" href="flex.css">
    </head>
    <body>
        <div id="content">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
        </div>
    </body>
    </html>

        row:

    #content
    {
        width: 500px;
        height: 500px;
        background: #0395e1;
        display: flex;
        flex-direction: row;
    }
    #content>div
    {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: #e53935;
    }

        样式:

        

        row-reverse:

        

    #content
    {
        width: 500px;
        height: 500px;
        background: #0395e1;
        display: flex;
        flex-direction: row-reverse;
    }
    #content>div
    {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: #e53935;
    }

        样式:

        

        column:

        

    #content
    {
        width: 500px;
        height: 500px;
        background: #0395e1;
        display: flex;
        flex-direction:column;
    }
    #content>div
    {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: #e53935;
    }

        样式:

        

        column-reverse:

        

    #content
    {
        width: 500px;
        height: 500px;
        background: #0395e1;
        display: flex;
        flex-direction:column-reverse;
    }
    #content>div
    {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: #e53935;
    }

        样式:

        

    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    【笔记】vue中websocket心跳机制
    【笔记】MySQL删除重复记录保留一条
    oss上传实例
    jquery实现图片点击旋转
    IDEA卡顿解决方法
    斐波那契数列
    【笔记】接口发送数据及接收
    【笔记】获取新浪财经最新的USDT-CNY的汇率
    【笔记】Java 信任所有SSL证书(解决PKIX path building failed问题)
    IDEA中报错“cannot resolve symbol toDF”,但编译正确可以运行
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/10948985.html
Copyright © 2011-2022 走看看