Flexbox - 如何更改列的順序？

我想知道如何獲得與圖片中相同的效果。我嘗試過很多方式......不成功。Flexbox - 如何更改列的順序？

我試圖設置一個有四列的flexbox，其中左列的大小相同。中間一列填充剩餘的空間。

我想要得到的效果，

的代碼如下：

.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.box-a { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-b { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-c { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-d { 
 
    background: green; 
 
    height: 800px; 
 
    width: 600px; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <div class="box-a"></div> 
 
    <div class="box-b"></div> 
 
    <div class="box-c"></div> 
 
    </div> 
 
    <div class="box-d"></div> 
 
</div>

來源

2017-07-13 Skeyo

可以使用順序屬性爲：

嘗試下面的代碼和媒體查詢。您可以通過瀏覽器調整大小來查看輸出。

.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    display: flex; 
 
    flex-direction: column; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
} 
 

 
.box-a { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-b { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-c { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-a, .box-b, .box-c { 
 
    padding: 20px 0; 
 
} 
 

 
.box-d { 
 
    background: green; 
 
    height: 800px; 
 
    width: 600px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    padding: 20px 0; 
 
} 
 
@media only screen and (max-width: 900px) { 
 
    .container { 
 
    display: flex; 
 
    float: left; 
 
    width: 100%; 
 
    flex-direction: column; 
 
} 
 
    .sidebar { 
 
    order: 2; 
 
    display: inline-block; 
 
    flex-direction: column; 
 
    float: left; 
 
    width: 100%; 
 
    } 
 
    .box-a { 
 
    float: left; 
 
    width: 95%; 
 
} 
 
.box-b, .box-c { 
 
    float: left; 
 
    width: 46%; 
 
} 
 
    .box-d { 
 
    order: 1; 
 
    float: left; 
 
    width: 95%; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 700px) { 
 

 
.box-b, .box-c { 
 
    float: left; 
 
    width: 95%; 
 
} 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <div class="box-a">box1</div> 
 
    <div class="box-b">box2</div> 
 
    <div class="box-c">box3</div> 
 
    </div> 
 
    <div class="box-d">box4</div> 
 
</div>

來源

2017-07-13 05:28:20 Jainam

使用媒體查詢像下面。

.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.box-a { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-b { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-c { 
 
    background: yellow; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 10px; 
 
} 
 

 
.box-d { 
 
    background: green; 
 
    height: 800px; 
 
    width: 600px; 
 
    margin: 10px; 
 
} 
 

 
@media screen and (max-width: 900px) { 
 
    .container { 
 
    flex-direction: column; 
 
    } 
 
    .box-d { 
 
    order: 1; 
 
    } 
 
    .sidebar { 
 
    order: 2; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    } 
 
    .box-c { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .container { 
 
    flex-direction: column; 
 
    } 
 
    .box-d { 
 
    order: 1; 
 
    } 
 
    .sidebar { 
 
    order: 2; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    } 
 
    .box-a, .box-b, .box-c { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <div class="box-a"></div> 
 
    <div class="box-b"></div> 
 
    <div class="box-c"></div> 
 
    </div> 
 
    <div class="box-d"></div> 
 
</div>

來源

2017-07-13 05:29:26 Gerard

-3

我希望這將解決您的問題，可以試試看。易於使用的柔性柱

.shuflebox { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.one { 
 
    background: red; 
 
    order: 3; 
 
    color:#fff; 
 
} 
 

 
.two { 
 
    background: pink; 
 
    order: 1; 
 
    color:#fff; 
 
} 
 

 
.three { 
 
    background: green; 
 
    order: 2; 
 
    color:#fff; 
 
}

<div class="container shuflebox"> 
 
    <div class="col-sm-4 one"> 
 
<h2> one</h2> 
 
    </div> 
 
    <div class="col-sm-4 two"> 
 
    <h2> two </h2> 
 
    </div> 
 
    <div class="col-sm-4 three"> 
 
<h2> three</h2> 
 
    </div> 
 
</div>

來源

2017-07-13 05:30:58

代碼的問題必須直接張貼作爲一個答案 –

Flexbox - 如何更改列的順序？

回答

相關問題