Question

我试图在不同的布局中安排一系列元素，用于＆＃34;移动＆＃34;屏幕与大屏幕。

基本上，在移动屏幕上，我想要一个标题跨越顶部的整个宽度，居中。下面是同一行右侧的图像和一组图标。

在较大的屏幕上，我希望标题与同一列中的图像相邻，但在图标上方（请参阅图像以获得所需结果）。

通过使用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结婚，而且我对我的标记非常灵活。但是，我想要避免的是，我的标题有两个实例，并根据屏幕大小隐藏一个实例。另外因为标题是动态的，我不能使用绝对定位。

Answer 1

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

The working fiddle（您必须调整浏览器大小才能看到更改）

HTML：

function fn() {
    var a = 1,
        b = 2;
    return a + b;
}
fn(); // 3

SCSS：

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

Answer 2

我认为您只需将查询设置为适用于屏幕尺寸，例如

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

使用flexbox在不同断点处更改布局

2 个答案: