不同的彈性容器並排

Question

我正在嘗試使我有兩個並排的半角包裝紙。 目前，包裝器確實占用了一半的空間，但並沒有出現在一邊。 display:flex似乎占據了整個寬度，並在側面留下了未使用的空間作為邊距。

 .wrapper { display: flex; flex-direction: column; width: 40%; border: 1px solid black; }

 <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div> <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div>

我還嘗試添加另一個寬度為 50% 的 div 外部包裝器，但它沒有幫助。 有任何想法嗎？

Answer 1

代替display: flex ，使用display: inline-flex 。

第一個是塊級元素，默認情況下，它采用父元素的全寬。

第二種是行內元素，它可以與同一行的其他元素共存。

 .wrapper { display: inline-flex; flex-direction: column; width: 40%; border: 1px solid black; }

 <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div> <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div>

或者，將父元素設置為display: flex ，默認情況下，它會強制子元素存在於同一行中。

將此添加到您的代碼中： body { display: flex } 。

 .wrapper { display: flex; flex-direction: column; width: 40%; border: 1px solid black; } body { display: flex; }

 <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div> <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div>

Answer 2

我相信display: flex類似於display: block如果它是頂級元素。 區別在於； flex 容器的子容器將能夠利用 flex 行為。 你需要做的是這樣的：

 body { margin: 0; }.parent { display: flex; height: 100vh; background: #eee; }.child { display: flex; flex-direction: column; flex: 1; border: 1px dashed #ccc; }

 <div class='parent'> <div class='child column'>child 1</div> <div class='child column'>child 2</div> </div>

Answer 3

用 div 包裹包裝器，然后display: flex 。

 .main-wrapper { display: flex; }.wrapper { display: flex; flex-direction: column; width: 50%; border: 1px solid black; }

 <div class="main-wrapper"> <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div> <div class="wrapper"> <div class="title">Test Title</div> <div class="info"> <div class="column"> <b>1</b> <span>One</span> </div> <div class="column"> <b>2</b> <span>Two</span> </div> </div> </div> </div>