How to create a border around elements in flex box
17,725
With display:flex
the element defaults to its native width of 100%,
Use display:inline-flex
on the .thing-row
....and it will collapse to the size of it's children.
.thing_row {
display: inline-flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
border: 1px solid black;
flex-basis: content;
}
<div class="mainThing">
<div class="thing_row">
<div class="thing_img">
<img src="http://www.fillmurray.com/60/60" height="60">
</div>
<div class="thing_texts">
<div class="noa_txt">NOW ON AIR</div>
<div class="main_txt">The Royal Sunrise</div>
<div class="peeps_txt">Meth, Pavan, Thinula and Jayavi</div>
</div>
</div>
</div>
Related videos on Youtube
Author by
Meth Munindradasa
Updated on June 04, 2022Comments
-
Meth Munindradasa almost 2 years
The border I'm drawing now fills the whole width of the screen. I would like it to shrink to the size of the child elements.
I have tried adding a border property to the flexbox, but as I said, it fills the whole screen.
<div class="mainThing"> <div class="thing_row"> <div class="thing_img"> <img src="url" height="60"> </div> <div class="thing_texts"> <div class="noa_txt">NOW ON AIR</div> <div class="main_txt">The Royal Sunrise</div> <div class="peeps_txt">Meth, Pavan, Thinula and Jayavi</div> </div> </div> </div>
.thing_row{ display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; border: solid black; flex-basis: content; }
I expected the border to be drawn, tightly fitting the child elements but it fills up the whole width of the screen.