不同的弹性容器并排

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>