html - 我怎样才能 "clear"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%;}

它使标题看起来正确，但正文仍在同一行。此外，右边的 "blah blah" 应该与 some name 在同一行，但我想我可以用绝对位置来解决这个问题。

现在，我的主要问题是“清除 float ”(可以这么说).caption 元素

那么我该如何修复这段代码呢？最好不要更改 html(但如果需要可以这样做)

Answer 1

希望这些代码片段能帮助您了解 flex-boxes 在 css3 中的工作原理以及如何在不使用 float 属性的情况下根据我们的需要排列元素。我为所有元素添加了一些背景颜色，以便更好地理解某些容器的行为是什么。并使用 relative(%) 大小来使其具有一定的响应性。因为它是为了理解目的，希望这能帮助那些在使用 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>