I'm trying to make it such that I have two half-width wrappers side by side. Currently the wrappers do take half the space but don't appear side to side. The display:flex
seems to be taking the whole width and leaving the unused space on the side as margin.
.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>
I also tried adding another div outside wrapper with width 50% but it didn't help. Any ideas?
Instead of display: flex
, use display: inline-flex
.
The first is a block-level element which, by default, takes the full width of the parent.
The second is an inline-level element, which can co-exist with other elements on the same line.
.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>
Alternatively, set the parent element to display: flex
which, by default, forces the children to exist in the same row.
Add this to your code: 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>
I believe display: flex
is similar to display: block
if it's a top level element. The difference being; the children of the flex container will be able to utilize the flex behavior. What you need to do is something like this:
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>
Wrap the wrappers with div and then 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.