CSS3控制元素排列

時間 2019-11-19

標籤 css3 css 控制元素排列欄目 CSS 简体版

原文原文鏈接

需求：

將改變爲。html

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AB換位置</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 400px;
        height: 500px;
        margin: 50px auto;
        border: 1px solid #999;
        line-height: 200px;
        font-size: 60px;
        color: #fff;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        /*-webkit-box-direction: normal;*/
        -webkit-box-direction: reverse;
    }
    .a {
        width: 200px;
        height: 200px;
        background: red;
    }
    .b {
        width: 200px;
        height: 200px;
        background: green;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="a">aaa</div>
        <div class="b">bbb</div>
    </div>
</body>
</html>

解釋：

1. display: -webkit-box; CSS3新盒模型，與display:flex;類似，具體請見。。。。web

2. -webkit-box-orient: vertical; 子元素排列方向：縱向（vertical），還有橫向（horizontal，默認方向）。flex

3. -webkit-box-align: center; 子元素橫向排列方式：居中排列（center），還有靠左（start）、靠右（end）、靠基線（baseline）。spa

4. -webkit-box-pack: center; 子元素縱向排列方式：居中排列（center），還有靠上（start）、靠下（end）。code

5. -webkit-box-direction: reverse; 子元素排列順序：倒序排列（reverse），還有正常（normal，默認順序）。orm

收穫：

經過一些CSS2的巧妙運用，也能夠達到反序的效果，但只限兩個元素，若是元素個數大於2，再用CSS2反序，想死的心都有了。htm

不過CSS3這個direction仍是很方便的，雖然說有兼容問題，單相信在不久的未來，CSS3就會變得更加經常使用和重要。blog

畢竟，「簡單，強大」纔是主線。it

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<