CSS：如何做線包裝的相反

經過一番搜索，我不知道如何做到這一點，我會給一個高度，第二個div是在第一和第三個div在右邊。CSS：如何做線包裝的相反

.wrapper { 
 
    border: 1px solid black; 
 
    width: 30px; 
 
} 
 

 
.left { 
 
    border: 1px solid red; 
 
    display: inline; 
 
}

<div class="wrapper"> 
 
    <div class="left">1</div> 
 
    <div class="left">2</div> 
 
    <div class="left">3</div> 
 
</div>

感謝

來源

2017-09-11 yeticoolbrothers42

我不能確切地瞭解什麼是你的目標，你能解釋一下更詳細的你想做什麼？ – codtex

您可以在列flex-direction使用flexbox是包裝 - 見下面的演示：

.wrapper { 
 
    border: 1px solid black; 
 
    height: 40px; 
 
    display: flex; /* Define a flexbox*/ 
 
    flex-wrap: wrap; /* Allow wrapping*/ 
 
    flex-direction: column; /*Column direction*/ 
 
    align-items: flex-start; /* Override default stretching*/ 
 
    align-content: flex-start; /* aligning wrapping lines */ 
 
} 
 

 
.left { 
 
    border: 1px solid red; 
 
    display: inline; 
 
}

<div class="wrapper"> 
 
    <div class="left">1</div> 
 
    <div class="left">2</div> 
 
    <div class="left">3</div> 
 
</div>

來源

2017-09-11 10:05:29 kukkuz

不錯，這是我想要的。大人物！ – yeticoolbrothers42

更以kukkuz答案。用於進一步閱讀有關Flexbox

撓曲方向

這建立了主軸，從而限定的方向撓曲的物品被放置在柔性容器中。 Flexbox是（除了可選包裝）單向佈局概念。將flex項目視爲主要佈置在水平行或垂直列中。

.container { 
    flex-direction: row | row-reverse | column | column-reverse; 
}

row（默認）：從左至右以ltr;從右到左在rtl
row-reverse：從右到左在ltr;左到右rtl
column：同row但從上到下
column-reverse：同row-reverse但自下而上

來源

2017-09-11 10:41:56 Hash

CSS：如何做線包裝的相反

回答

相關問題