How can I "clear" a flexbox item? - html

Question

I have this code:
.userInfo h2 {
color: #012850;
font-size: 2rem;
font-weight: 800;
line-height: 2.6875rem;
}
.time {
color: #2966A3;
font-size: 1.75rem;
font-weight: 600;
line-height: 2.375rem;
}
.textzone .caption p {
font-size: 1.25rem;
}
.iconsZone {
margin-top: 29px;
display: flex;
height: 60px;
flex-direction: row;
order: 1;
align-content: flex-end;
align-self: end;
}
.textzone .caption {
order: 3;
}
.adHead {
display: flex;
order: 2;
}
.profile-img img {
margin-right: 25px;
width: 150px;
height: auto;
}
<div class="textzone">
<div class="adHead">
<div class="profile-img">
<img src="images/avatar.png" alt="">
</div>
<div class="userInfo">
<h2>Some Name</h2>
<p class="time">05:55 PM</p>
</div>
<div class="caption">
<p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>
<div class="iconsZone">
<div class="comments iconBox">
blah!
</div>
<div class="likes iconBox">
blah blah!
</div>
</div>
</div>
which generates something like the following image:
and I need it to look like this instead:
So I basically almost have it, but can't figure how to make the title and main text go on different rows. I tried with
.caption{flex: 0 1 100%;}
and it makes the heading look correct, but main text is still in the same line. Also, the "blah blah" on the right should be on the same line as some name but guess I can fix that with position absolute.
Right now, my main issue is to "clear the float" (so to speak) of the .caption element
So how should I fix this code? Preferably not changing html (but can do if needed)

Answer 1

Hope these code snippet will help you to understand how the flex-boxes working in css3 and how to arrange items according to our needs without using float property. I added some background colors for all the elements for better understand, what are the behaviors of the certain containers. and used relative(%) sizes to make it somewhat responsive. since it's for the understanding purpose, hope this will help anyone who struggle with the CSS element arranging with flex.
Unfortunately Had to change your HTML base to make it work like you've asked for.
*, body{
box-sizing: border-box;
}
.textzone{
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
padding: 10px;
background-color: yellow;
}
.profile-img{
display: flex;
width: 30%;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-wrap: wrap;
}
.profile-img img{
width: 80%;
height: 80%;
}
.adHead{
display: flex;
width: 70%;
flex-wrap: wrap;
background-color: red;
flex-direction: column;
}
.title-container{
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
background-color: brown;
}
.userInfo{
display: flex;
width: 70%;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
background-color: tomato;
}
.userInfo h2 {
color: #012850;
font-size: 2rem;
font-weight: 800;
line-height: 2.6875rem;
margin: 0; /* to remove the margin sets by default */
}
.time {
color: #2966A3;
font-size: 1.75rem;
font-weight: 600;
line-height: 2.375rem;
margin: 0;
}
.textzone .caption p {
font-size: 1.25rem;
}
.iconsZone{
display: flex;
width: 30%;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
background-color: orange;
}
.comments-iconBox{
display: flex;
width: 50%;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5%;
background-color: skyblue;
}
.likes-iconBox{
display: flex;
width: 50%;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5%;
background-color: aqua;
}
.caption{
display: flex;
width: 100%;
flex-wrap: wrap;
background-color: gray;
}
<div class="textzone">
<div class="profile-img">
<img src="icon2.png" alt="">
</div>
<div class="adHead">
<div class="title-container">
<div class="userInfo">
<h2>Some Name</h2>
<p class="time">05:55 PM</p>
</div>
<div class="iconsZone">
<div class="comments-iconBox">
blah!
</div>
<div class="likes-iconBox">
blah blah!
</div>
</div>
</div>
<div class="caption">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corrupti architecto dicta ab, vero minima nesciunt fugiat
perspiciatis nobis eveniet suscipit nostrum, dolore quos molestiae at,
officiis fugit id sit officia? Sed ut perspiciatis, unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium
</p>
</div>
</div>
</div>

Answer 2

I think you need to enable flex items to wrap, and make a few other minor adjustments to your CSS:
.userInfo h2 {
color: #012850;
font-size: 2rem;
font-weight: 800;
line-height: 2.6875rem;
}
.time {
color: #2966A3;
font-size: 1.75rem;
font-weight: 600;
line-height: 2.375rem;
}
.textzone {
display: flex; /* new */
}
.textzone .caption p {
font-size: 1.25rem;
}
.iconsZone {
margin-top: 29px;
display: flex;
height: 60px;
/* flex-direction: row;
order: 1;
align-content: flex-end;
align-self: end; */
}
.textzone .caption {
order: 3;
}
.adHead {
display: flex;
/* order: 2; */
flex-wrap: wrap; /* new */
}
.caption {
flex-basis: 100%; /* new */
}
.profile-img img {
margin-right: 25px;
width: 150px;
height: auto;
}
<div class="textzone">
<div class="adHead">
<div class="profile-img">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""><!-- added for demo -->
</div>
<div class="userInfo">
<h2>Some Name</h2>
<p class="time">05:55 PM</p>
</div>
<div class="caption">
<p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>
<div class="iconsZone">
<div class="comments iconBox">
blah!
</div>
<div class="likes iconBox">
blah blah!
</div>
</div>
</div>