html - 如何移动图片下方的内容？

Question

我想使用 flex 和 order 先显示图像再显示内容。现在，如何推送或移动图片下方的内容？我不想让他们紧挨着。我不想移除 flex，因为如果我移除它，订单将无法正常工作。这意味着图像不会首先显示。此代码适用于我的移动版本，但我现在正在测试桌面版。

img {
    width: 100%;
}
.music-wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.poster-content {
    -webkit-order: 2;            
    order: 2; 
}
.poster-wrap {
    -webkit-order: 1;            
    order: 1; 
}

<section class="row-wrap">
    <div class="row-inner music-wrapper">
        <div class="poster-wrap">
            <img class="poster" src="http://dummyimage.com/420x420/000/fff"> 
        </div>
        <div class="poster-content">
            <h1>Sunday</h1>
            <p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
            <a class="btn-wrap" target="_blank" href="#">
                <div class="btn">listen now</div>
            </a>
        </div>
    </div>
</section>

<section class="row-wrap">
    <div class="row-inner music-wrapper">
        <div class="poster-content">
            <h1>Sunday</h1>
            <p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
            <a class="btn-wrap" target="_blank" href="#">
                <div class="btn">listen now</div>
            </a>
        </div>
        <div class="poster-wrap">
            <img class="poster" src="http://dummyimage.com/420x420/000/fff"> 
        </div>	
    </div>
</section>

Answer 1

将 flex-direction:column; 添加到 .music-wrapper。请参阅此解决方案:

img {
  width: 100%;
}
.music-wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  flex-direction:column;
}	
.poster-content {
  -webkit-order: 2;            
  order: 2; 
}
.poster-wrap {
  -webkit-order: 1;            
  order: 1; 
}

<section class="row-wrap">
  <div class="row-inner music-wrapper">
    <div class="poster-wrap">
      <img class="poster" src="http://dummyimage.com/420x420/000/fff"> 
    </div>
    <div class="poster-content">
      <h1>Sunday</h1>
      <p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
      <a class="btn-wrap" target="_blank" href="#">
        <div class="btn">listen now</div>
      </a>
    </div>
  </div>
</section>
<section class="row-wrap">
  <div class="row-inner music-wrapper">
    <div class="poster-content">
      <h1>Sunday</h1>
      <p>Carefully selected songs to get you in a mellow state of mind after a week of hard work. A perfect mixtape to get ready to chase your dream again on Monday.</p>
      <a class="btn-wrap" target="_blank" href="#">
        <div class="btn">listen now</div>
      </a>
    </div>
    <div class="poster-wrap">
      <img class="poster" src="http://dummyimage.com/420x420/000/fff"> 
    </div>	
  </div>
</section>

此外，您还可以使用简写 flex-flow:column;。但它不是必需的，因为 flex-direction 完成了工作。 flex-flow 的解释:

This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/