AdiYogi AdiYogi - 1 month ago 7
CSS Question

The second flex item's elements should also line up side-by-side

<script src="https://use.fontawesome.com/2a2c577e07.js"></script>
<div class="parent-flex">
<div class="class1">Class 1</div>
<div class="class2">
<img src="http://farm4.static.flickr.com/3140/3506456511_43787ce7e6.jpg" alt="">
<h4> The author | </h4>
<ul>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
</ul>
<p>The dummy text text</p>
</div>
</div>


CSS

.parent-flex {
display: flex;
}
.class2 {
margin-left: auto;
}
ul {
list-style-type: none;
}


SITUATION: .class2 is the 2nd child of a parent, which is a flex.
.class 2 has items like
img
h2
ul with fontawesome items
p

I want all the items to align in one line. is there any flex propert that can do this trick in short or may be any non flex property method (method should be easy to be build for responsiveness)

Answer Source

If you add display: flex to both class2 and ul, all elements and their children will line up side-by-side.

Why you need to add display: flex multiple times is because it only affects 1 level down, so in your original code, it is only the class1 and class2 elements that becomes flex items and lines up horizontally.

It this what you look for?

.parent-flex {
  display: flex;
  align-items: center;
}
.class2 {
  display: flex;
  align-items: center;
  /*margin-left: auto;*/    /*  temp. removed, uncomment if all
                                its elements should align right  */ 
}
ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}
img {
  height: 100px;
}
<script src="https://use.fontawesome.com/2a2c577e07.js"></script>
<div class="parent-flex">

  <div class="class1">Class 1</div>
  <div class="class2">
    <img src="http://farm4.static.flickr.com/3140/3506456511_43787ce7e6.jpg" alt="">
    <h4> The author | </h4>
    <ul>
      <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
    </ul>
    <p>The dummy text text</p>
  </div>
</div>