html - 第二个 flex 元素的元素也应该并排排列

Question

<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;
}

情况:.class2 是父级的第二个子级，它是一个 Flex。 .class 2 有类似的元素 图像 小时2 ul 与 fontawesome 元素

我希望所有元素都对齐在一行中。是否有任何 Flex 属性可以简单地实现此技巧，或者可能是任何非 Flex 属性方法(该方法应该易于构建响应能力)

Answer 1

如果将 display: flex 添加到 class2 和 ul 中，所有元素及其子元素将并排排列。

为什么需要多次添加 display: flex 是因为它只影响下一级，所以在你原来的代码中，只有 class1 和 >class2 元素成为 flex 元素并水平排列。

.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>