Flex布局02：flex container属性 & flex-direction(改变主轴方向)

flex container属性 && flex-direction

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

row：默认值从左到右

row-reverse: 反转从右到左

column : 从上到下

column-reverse: 从下到上

代码

<!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

出处：http://www.cnblogs.com/zy7y

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文链接，否则保留追究法律责任的权利。