Question

我有一些问题，了解如何使用Susy Next生成以下布局。

我似乎无法在Susy中干净利落地做这件事，或者根本不是。

源订单如下，可能不会更改。

#include "Gemeente.h"
#include "Persoon.h"
#include "School.h"
#include "Werkzaam.h"

// Implementatie
int main()
{
    // Constructie
    School school1;
    Werkzaam werkzaam1;
    Persoon persoon1;

    school1.gemeente.InvoerenGemeente();
    persoon1.InvoerenPersoon();
    persoon1.WeergevenPersoon();

    system("pause");
}

Mobile上所需的布局是这样的：

<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>

桌面上所需的布局是这样的：

    ---------
    |   B   |
    |-------|
    |   A   |
    |-------|
    |   C   |
    |-------|
    |   D   |
    ---------

我认为这对Susy来说应该很容易，但文档并没有那么大的帮助。

推荐帮助

Answer 1

Susy Next基本上是网格宽度的计算器。当您想要水平重新排序元素时，这可能会有所帮助 - 但垂直重新排序要困难得多。 Susy可以帮助第二种布局，但不能对第一种布局做很多事情。

但是，Flexbox可以使用order属性来处理这两种情况：

.container {
  align-items: stretch; 
  display: flex;
  flex-direction: row-reverse; // flow right-to-left
  flex-wrap: wrap; // wrap top-to-bottom
}

.item {
  flex: 1 1 $preferred-width;
}

.b {
  order: 1;
}

.a {
  order: 2;
}

.c {
  order: 3;
}

.d {
  order: 4;
}

使用Flexbox或CSS Grid和媒体查询可以有其他方法来实现不同的布局。这对我来说似乎是最简单的选择。

Susy下一个内容移动到桌面布局顺序

1 个答案: