nth-child(odd) 和 nth-child(even) 具有不同的对齐项

Question

我正在使用 flexbox 并且我试图让 nth-child(odd) 来align-items:flex-start 和 nth-child(even)align-items:flex-end 但所有的孩子都会对齐为第一个孩子.我怎样才能做到这一点？有没有办法使用 Flexbox 而不是浮动来做到这一点。我的目标是让它看起来有点类似于 Facebook Messenger。

.received-message {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.received-message:nth-child(odd) {
  align-items: flex-start;
}

.received-message:nth-child(even) {
  align-items: flex-end;
}

.message-pop-up {
  width: 80%;
  position: relative;
  margin: 0 20px 20px 20px;
}

.message-text {
  border: 2px solid #9c9696;
  margin: 0 50px 0 50px;
  background-color: white;
}

.message-pop-up:nth-child(odd) img {
  border-radius: 50px;
  float: right;
  margin: 10px 10px 0 0;
}

.message-pop-up:nth-child(even) img {
  border-radius: 50px;
  margin-right: 10px;
  float: left;
  margin: 10px 0 0 10px;
}

<div class="received-box">
  <div class="received-message">
    <div class="message-pop-up">
      <img src="https://cdn-fastly.hometalk.com/media/profile/2017/11/28/31906042_2.jpg?size=32x32" />
      <div class="message-text">
        <p>dsvdfvv</p>
        <a href="www.google.com" target="_blank">Offer, click here</a>
        <button>Accept</button>
      </div>
    </div>
    <div class="message-pop-up">
      <img src="https://cdn-fastly.hometalk.com/media/profile/2017/11/28/31906042_2.jpg?size=32x32" />
      <div class="message-text">
        <p>dsvdfvv</p>
      </div>
    </div>
    <div class="message-pop-up">
      <img src="https://cdn-fastly.hometalk.com/media/profile/2017/11/28/31906042_2.jpg?size=32x32" />
      <div class="message-text">
        <p>Hello testing testing</p>
      </div>
    </div>
  </div>
</div>

Answer 1

align-items仅适用于柔性容器。您需要align-self的子元素，flex并且应该将其赋予message-pop-up类 not received-message。

有关更多信息Flexbox： https: //css-tricks.com/snippets/css/a-guide-to-flexbox/

.received-message {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.message-pop-up:nth-child(odd) {
  align-self: flex-end;
}

.message-pop-up:nth-child(even) {
  align-self: flex-start;
}

.message-pop-up {
  width: 80%;
  position: relative;
  margin: 0 20px 20px 20px;
}

.message-text {
  border: 2px solid #9c9696;
  margin: 0 50px 0 50px;
  background-color: white;
}

.message-pop-up:nth-child(odd) img {
  border-radius: 50px;
  float: right;
  margin: 10px 10px 0 0;
}

.message-pop-up:nth-child(even) img {
  border-radius: 50px;
  margin-right: 10px;
  float: left;
  margin: 10px 0 0 10px;
}

<div class="received-box">
  <div class="received-message">
    <div class="message-pop-up">
      <img src="https://cdn-fastly.hometalk.com/media/profile/2017/11/28/31906042_2.jpg?size=32x32" />
      <div class="message-text">
        <p>dsvdfvv</p>
        <a href="www.google.com" target="_blank">Offer, click here</a>
        <button>Accept</button>
      </div>
    </div>
    <div class="message-pop-up">
      <img src="https://cdn-fastly.hometalk.com/media/profile/2017/11/28/31906042_2.jpg?size=32x32" />
      <div class="message-text">
        <p>dsvdfvv</p>
      </div>
    </div>
    <div class="message-pop-up">
      <img src="https://cdn-fastly.hometalk.com/media/profile/2017/11/28/31906042_2.jpg?size=32x32" />
      <div class="message-text">
        <p>Hello testing testing</p>
      </div>
    </div>
  </div>
</div>