zoukankan      html  css  js  c++  java
  • Flex布局02:flex container属性 & flex-direction(改变主轴方向)

    flex container属性 && flex-direction

    flex items 默认都是沿着main axis主轴方向排列main start -> main end

    • row: 默认值 从左到右

    image-20210224131307651

    • row-reverse: 反转 从右到左

    image-20210224131245814

    • column : 从上到下

    image-20210224131128852

    • column-reverse: 从下到上

    image-20210224131055325

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            #box{
                /* 开启flex布局:块元素 */
                display: flex;
                /* 开启flex布局;行元素 */
                /* display: inline-flex; */
                background-color: red;
                 600px;
                
                /* 水平居中 */
                margin: 0 auto;
    
                /* row: 默认值从main start -> main end
                row-reverse: 反转 从右到左
                column : 从上倒下
                column-reverse: 从下到上
                */
                flex-direction: row-reverse; 
            }
            .item{
                text-align: center;
                line-height: 100px;
                 100px;
            }
    
            .item1{
                background-color: azure;
            }
            .item2{
                background-color: green;
            }
            .item3{
                background-color: gold;
            }
        </style>
    </head>
    <body>
    
        <div id="box">
            <div class="item item1">item1</div>
            <div class="item item2">item2</div>
            <div class="item item3">item3</div>
        </div>
        <strong>行类元素</strong>
    </body>
    </html>
    
    作者:zy7y
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文链接,否则保留追究法律责任的权利。
  • 相关阅读:
    Largest Rectangle in Histogram
    Valid Sudoku
    Set Matrix Zeroes
    Unique Paths
    Binary Tree Level Order Traversal II
    Binary Tree Level Order Traversal
    Path Sum II
    Path Sum
    Validate Binary Search Tree
    新手程序员 e
  • 原文地址:https://www.cnblogs.com/zy7y/p/14440932.html
Copyright © 2011-2022 走看看