如何“清除” flexbox项目？

Question

我有此代码：

.userInfo h2 {
  color: #012850;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2.6875rem;
}

.time {
  color: #2966A3;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.375rem;
}

.textzone .caption p {
  font-size: 1.25rem;
}

.iconsZone {
  margin-top: 29px;
  display: flex;
  height: 60px;
  flex-direction: row;
  order: 1;
  align-content: flex-end;
  align-self: end;
}

.textzone .caption {
  order: 3;
}

.adHead {
  display: flex;
  order: 2;
}

.profile-img img {
  margin-right: 25px;
  width: 150px;
  height: auto;
}

<div class="textzone">
  <div class="adHead">
    <div class="profile-img">
      <img src="images/avatar.png" alt="">
    </div>
    <div class="userInfo">
      <h2>Some Name</h2>
      <p class="time">05:55 PM</p>
    </div>
    <div class="caption">
      <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
    </div>
  </div>

  <div class="iconsZone">
    <div class="comments iconBox">
      blah!
    </div>
    <div class="likes iconBox">
      blah blah!
    </div>
  </div>
</div>

生成类似下图的内容：

我需要让它看起来像这样：

所以我基本上几乎拥有它，但是无法弄清楚如何使标题和主要文本出现在不同的行上。我尝试过

.caption{flex: 0 1 100%;}

，它使标题看起来正确，但主要文本仍在同一行中。另外，右侧的“等等” 应该与一些名字在同一行，但是我猜我可以用绝对位置来解决。

现在，我的主要问题是“清除” .caption元素的浮动量

那么我应该如何解决此代码？最好不要更改html（但如果需要可以这样做）

Answer 1

希望这些代码片段将帮助您了解Flex-Box在CSS3中的工作方式，以及如何在不使用float属性的情况下根据我们的需求排列项目。我为所有元素添加了一些背景色，以便更好地理解某些容器的行为。并使用相对（％）大小使其具有一定的响应能力。出于理解的目的，希望这将对那些使用flex布置CSS元素的人有所帮助。 不幸的是，不得不更改您的HTML库以使其按您的要求工作。

*, body{
    box-sizing: border-box;
}
.textzone{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    background-color: yellow;
}
.profile-img{
    display: flex;
    width: 30%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.profile-img img{
    width: 80%;
    height: 80%;
}
.adHead{
    display: flex;
    width: 70%;
    flex-wrap: wrap;
    background-color: red;
    flex-direction: column;
}
.title-container{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: brown; 
}
.userInfo{
    display: flex;
    width: 70%;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: tomato; 
}
.userInfo h2 {
  color: #012850;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2.6875rem;
  margin: 0; /* to remove the margin sets by default */
}
.time {
  color: #2966A3;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.375rem;
  margin: 0;
}
.textzone .caption p {
  font-size: 1.25rem;
}
.iconsZone{
    display: flex;
    width: 30%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    background-color: orange;
}
.comments-iconBox{
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5%;
    background-color: skyblue;
}
.likes-iconBox{
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5%;
    background-color: aqua;
}
.caption{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    background-color: gray;
}

    <div class="textzone">
        <div class="profile-img">
            <img src="icon2.png" alt="">
        </div>
        <div class="adHead">
            <div class="title-container">
                <div class="userInfo">
                    <h2>Some Name</h2>
                    <p class="time">05:55 PM</p>
                </div>
                <div class="iconsZone">
                    <div class="comments-iconBox">
                        blah!
                    </div>
                    <div class="likes-iconBox">
                        blah blah!
                    </div>
                </div>
            </div>
            <div class="caption">
                <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Corrupti architecto dicta ab, vero minima nesciunt fugiat 
                    perspiciatis nobis eveniet suscipit nostrum, dolore quos molestiae at, 
                    officiis fugit id sit officia? Sed ut perspiciatis, unde omnis iste natus error 
                    sit voluptatem accusantium doloremque laudantium
                </p>
            </div>
        </div> 
    </div>

Answer 2

我认为您需要启用flex项来包装，并对CSS进行其他一些小的调整：

.userInfo h2 {
  color: #012850;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2.6875rem;
}

.time {
  color: #2966A3;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.375rem;
}

.textzone {
  display: flex; /* new */
}

.textzone .caption p {
  font-size: 1.25rem;
}

.iconsZone {
  margin-top: 29px;
  display: flex;
  height: 60px;
  /* flex-direction: row;
     order: 1;
     align-content: flex-end;
     align-self: end; */
}

.textzone .caption {
  order: 3;
}

.adHead {
  display: flex;    
  /* order: 2; */
  flex-wrap: wrap;  /* new */
}

.caption {
  flex-basis: 100%; /* new */
}

.profile-img img {
  margin-right: 25px;
  width: 150px;
  height: auto;
}

<div class="textzone">
  <div class="adHead">
    <div class="profile-img">
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""><!-- added for demo -->
    </div>
    <div class="userInfo">
      <h2>Some Name</h2>
      <p class="time">05:55 PM</p>
    </div>
    <div class="caption">
      <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
    </div>
  </div>
  <div class="iconsZone">
    <div class="comments iconBox">
      blah!
    </div>
    <div class="likes iconBox">
      blah blah!
    </div>
  </div>
</div>