Question

我想使用flex和order来首先显示图像和内容。现在，我如何推送或移动图像下的内容？我不希望他们彼此相邻。我不想删除flex，因为如果我将其删除，则订单无效。这意味着图像不会首先显示。此代码适用于我的移动版本，但我现在正在为桌面测试它。

＆＃13;

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; 
}

＆＃13;

<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>

＆＃13;

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：

的解释

这是一种缩写的flex-direction和flex-wrap属性，它们共同定义了flex容器的主轴和交叉轴。默认值为row nowrap https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何在图片下移动内容？

1 个答案: