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有类似的项目 IMG H2 ul与fontawesome项目 P

我希望所有项目都在一行中对齐。是否有任何flex属性可以简单地完成这个技巧，或者可能是任何非flex属性方法（方法应该很容易构建响应性）

Answer 1

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

为什么需要多次添加display: flex，因为它只会影响1级，所以在原始代码中，只有class1和class2元素成为弹性项目并横向排列。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需将flex属性添加到第二个孩子。

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

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

第二个弹性项目的元素也应该并排排列

2 个答案: