Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

css3 flex 布局的问题

附上地址, 或者看下面代码。
https://jsfiddle.net/2ydhkep5/

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            margin:0;
            padding:0;
        }
        body,html {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .container {
            width: 100%;
            height: 100%;
            display: -webkit-flex;
        }
        .box-a {
            -webkit-flex: 5.5;
            background: #ccc;
            font-size: 30px;
        }
        .box-b {
            -webkit-flex: 4.5;
            background: #f6f6f6;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box-a">我是a</div>
    <div class="box-b">我是b</div>
</div>
</body>
</html>

现在用的是 flex 布局

现在a在左边, b在右边。

我想实现, b在左边, a在右边。 ps: 不能改变div顺序。 我就想知道有没有属性可以调换顺序的。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

父元素设置:flex-direction:row-reverse;水平排列方向从右向左

参考:http://www.ruanyifeng.com/blo...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...