nth-child（单数）和nth-child（偶数）具有不同的align-items

Question

我正在使用flexbox，我试图让nth-child（奇数）对齐项目：flex-start和nth-child（even）align-items：flex-end但是所有的孩子都会作为第一个孩子对齐。我怎么能实现这个目标？有没有办法使用flexbox而不是浮动。我的目标是让它看起来有点像facebook messenger。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

align-items仅适用于Flex容器。 align-self的子元素需要flex，而message-pop-up类不应received-message。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;