在不同断点使用Flexbox改变布局

Question

在不同断点使用Flexbox改变布局

htmlcssflexbox

4

我正在尝试针对“移动”屏幕和大屏幕设置不同的元素布局序列。

基本上，在移动屏幕上，我希望标题在顶部居中横跨整个宽度。下面是一张图片和一组图标，这些元素在同一行右侧。

在更大的屏幕上，我希望标题与图片在同一列相邻，但图标位于上方（请参见所需结果的图像）。

通过调整 flexbox 规则和 order 属性，我可以实现其中 2/3 的效果。我已经按照我的方式将标题放在了图片旁边，但是图标组始终在图片下面。

查看我的示例以获取我的尝试

HTML

<div class="container">
 <div class="row">
    <h1 class="title">This is my title</h1>
    <div class="image">
     <img src="https://placem.at/things?w=300&h=400">
    </div>
    <div class="icon-section">
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
      <div class="icon">
         <img src="http://placehold.it/40x40">
      </div>
  </div>
</div>

SCSS

.container {
  max-width: 500px;
  @media (min-width: 800px) {
    max-width: 750px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
}
.title {
  width: 100%;
  text-align: center;
  @media (min-width: 800px) {
    flex: 0 0 50%;
    order: 2;
    text-align: left;
  }
}
.icon-section {
  padding-left: 20px;
  @media (min-width: 800px) {
    display: flex;
    order: 3;
  }
}
.icon {
  @media (min-width: 800px) {
    margin-right: 5px;
  }
}

我不一定非要使用flexbox布局方式，我的标记语言也很灵活。但是，我想避免的是在不同屏幕大小下需要隐藏一个标题的情况。此外，由于标题是动态生成的，所以我无法使用绝对定位。

- ktomasso

这种布局可能无法使用order属性实现。即使可以，也会非常混乱和复杂。在我看来，最简单的方法是使用flexbox，根据屏幕大小使用display: none。我知道你想避免这种情况。但我认为这是最简单和最可靠的方法：https://jsfiddle.net/kedr5aya/2/ - Michael Benjamin

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aleksander · Answer 1

我认为你只需要设置查询以适应屏幕大小，例如：

@media only screen and (max-width: 500px)

- ktomasso · Answer 2

我能够通过使用flexbox和传统浮动的组合来解决这个问题。基本上，我根据大屏幕尺寸的外观编写了标记，并在移动尺寸上使用flexbox来更改元素堆叠时的排序顺序。

这个工作的fiddle（您需要调整浏览器大小以查看更改）

HTML：

     <div class="container">
      <div class="row">

        <div class="image">
         <img src="https://placem.at/things?w=300&h=400">
        </div>
        <h1 class="title">This is my title</h1>
        <div class="meta">
          <div class="icon-section">
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
            </div>
            <div class="icon">
               <img src="http://placehold.it/40x40">
          </div>
          </div>
      </div>
    </div>

SCSS：

      .container {
      max-width: 500px;
      @media (min-width: 800px) {
        max-width: 750px;
      }
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-start;
      align-content: flex-start;
      @media (min-width: 800px) {
        float: left;
        display: block;
      }
    }
    .image {
      order: 2;
      @media (min-width: 800px){
        float: left;
        margin-right: 20px;
      }
    }
    .meta {
      order: 2;
    } 
    .title {
      width: 100%;
      text-align: center;
       order: 1;
      @media (min-width: 800px) {
        text-align: left;
        float: left;
        width: auto
      }
    }
    .icon-section {
      float: left;
      order: 3;
      margin-left: 20px;
      @media (min-width: 800px) {
        display: flex;
        margin-left: 0;
      }
    }
    .icon {
      @media (min-width: 800px) {
       margin-right: 5px;
      }
    }