Question

我有一个评论部分，用户可以在其中输入评论，它会自动显示评论和输入评论的时间。

我希望作者姓名在左边，日期在右边，并且应该使用flex-box进行响应

这是jsfiddle： https://jsfiddle.net/68vt3c7s/

这就是我想要的

这是我所拥有的片段：

.comments-description {
  display: flex;
  flex-direction: row;
  padding: 23px 0px;
  border-bottom: 2px solid #EBEBEB;
}

.comments_details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-basis: 100%;
  margin-top: 27px;
}

.comments_wrapper {
  padding: 32px 21px;
}

.comments-photo img {
  border-radius: 300px;
  width: 80px;
  height: 80px;
  position: relative;
  top: 37px;
}

<div class="comments-description">
  <div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
  <div class="comments_wrapper">
    <div class="comments_details">
      <h1>Mike Ross</h1>
      <span class="days">4 minutes ago</span>
    </div>
    <div class="comments_text">
      <p>dingi
      </p>
    </div>
  </div>
</div>

要获得我想要的东西我需要改变什么？

Answer 1

为.comments_wrapper添加flex: auto;，以使时间与右边对齐

手段：

.comments_wrapper {
    padding: 32px 21px;
    flex: auto; /* here I added */
}

Answer 2

希望这会有所帮助。

.comments_wrapper{
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
}

Answer 3

comments_wrapper选择器没有占据其他位置，这就是为什么您看不到效果的原因。请尝试以下方式：

.comments_wrapper {
    padding: 32px 21px;
    flex-grow: 1; /* Key Line */
}

Answer 4

您需要设置.comments_wrapper的宽度

.comments-description {
    display: flex;
    flex-direction: row;
    padding: 23px 0px;
    border-bottom: 2px solid #EBEBEB;
}

.comments_details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-basis: 100%;
    margin-top: 27px;
}

.comments_wrapper {
    padding: 32px 21px;
    width: 100%; /*add this*/
}

.comments-photo img {
    border-radius: 300px;
    width: 80px;
    height: 80px;
    position: relative;
    top: 37px;
}
.days{
margin-left: auto;
}

Answer 5

将flex: auto;添加到.comments_wrapper css

.comments_wrapper {
   padding: 32px 21px;
   flex: auto;
}

.comments-description {
  display: flex;
  flex-direction: row;
  padding: 23px 0px;
  border-bottom: 2px solid #EBEBEB;
}

.comments_details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-basis: 100%;
  margin-top: 27px;
}

.comments_wrapper {
  padding: 32px 21px;
  flex: auto;
}

.comments-photo img {
  border-radius: 300px;
  width: 80px;
  height: 80px;
  position: relative;
  top: 37px;
}

<div class="comments-description">
  <div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
  <div class="comments_wrapper">
    <div class="comments_details">
      <h1>Mike Ross</h1>
      <span class="days">4 minutes ago</span>
    </div>
    <div class="comments_text">
      <p>dingi
      </p>
    </div>
  </div>
</div>

为什么Flexbox之间的两端对齐空间不起作用？

5 个答案: