Question

我希望flexbox容器中的div出现在下一行。

我有一个抽屉div，其中有详细信息div。在详细信息div中，我希望SVG和span元素在一行中。如果span元素的文本多于一行，则应该适合下一行，并且span元素之后的div元素应始终位于span元素之下并居中于list元素的中心（无论span元素的文本是否多于一行）

如下所示。 enter image description here

下面是代码，

.drawer {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 392px;
    top: 55px;
    right: 8px;
    min-height: 40%;
    max-height: 450px;
    margin-left: 16px;

    &::after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 83%;
        margin-left: -5px;
        border-width: 14px;
        border-style: solid;
    }
}

.item {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    padding: 8px;
    min-height: 49px;
    li {
        list-style: none;
    }
    .details {
        display: flex;
        flex-grow: 1;
        color: #333;
        margin-right: 4px;
     }
 }
<div class="drawer">
    <ul>
        <li class="item">
            <div class="details">
                <svg/>
                <span>sometext</span>
                <div>
                    <div/><img/>
                </div>
             </div>
        </li>
    </ul>
</div>

有人可以帮我解决这个问题吗？谢谢。

Answer 1

您的结构包含太多样式，在查看您的要求后我不确定（附加的png）。我添加了一个简单的结构以适合您的要求，请看是否有意义。如果您想要一些东西，请还原

.drawer {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 392px;
  top: 55px;
  left: 8px;
  min-height: 40%;
  max-height: 450px;
  margin-left: 16px;
}

svg {
  border: solid 1px;
}

.drawer::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 83%;
  margin-left: -5px;
  border-width: 14px;
  border-style: solid;
}

.item {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  padding: 8px;
  min-height: 49px;
}

.item {
  list-style: none;
  border-bottom: solid 1px;
}

.item .details {
  color: #333;
  margin-right: 4px;
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

<body>
  <div class="drawer">
    <ul>
      <li class="item">
        <div class="media">
          <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
          <div class="media-body" style="margin-left:20px;">

            <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
              in faucibus. </p>
            <p style="text-align:center;"> Center align Text </p>
          </div>
        </div>
      </li>
       <li class="item">
        <div class="media">
          <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
          <div class="media-body" style="margin-left:20px;">

            <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
              in faucibus. </p>
            <p style="text-align:center;"> Center align Text </p>
          </div>
        </div>
      </li>
       <li class="item">
        <div class="media">
          <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
          <div class="media-body" style="margin-left:20px;">

            <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
              in faucibus. </p>
            <p style="text-align:center;"> Center align Text </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</body>

Answer 2

下面的文本将在顶部居中放置更多内容

.drawer {
  display: flex;
  flex-direction: row;
}

.drawer_icon {
  width: 60px;
  height: 60px;
  background: palevioletred;
  margin-right: 16px;
}

p {
  text-align: center;
}

<div class="drawer">
  <div class="drawer_icon"></div>
  <div>
    <span>Some Text</span>
    <p>Centered text</p>
  </div>
</div>

如何在Flexbox中使div出现在下一行？

2 个答案: