CODEWITHSUNDEEP
htmlcssflexbox
Rick Alvarez
Rick Alvarez

Reputation: 191

How can I "clear" a flexbox item?

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: the wrong way

and I need it to look like this instead:

enter image description here

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)

Upvotes: 3

Views: 4681

Answers (2)

Sanira Liyanage
Sanira Liyanage

Reputation: 1237

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>

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 372059

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>

Upvotes: 1

Related Questions