针对不同宽度优化flexbox CSS代码

Question

下面的代码片段在技术上实现了一个页脚的目标，该页脚具有宽屏和小屏幕的布局，如下图所示。

我的问题是，我正确使用弹性盒吗？是否有更优化的方法来实现图像中所示的预期结果？我问，因为我的css感觉很冗长，我想知道是否有更好的方法。

广泛的屏幕：

小屏幕：

.appFooter {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  text-align: center;
}
.appFooter ul.navigation {
  margin: 0 0 48px 0;
  padding: 0;
  list-style: none;
}
.appFooter > * {
  flex: 1 100%;
}
@media only screen and (min-width: 900px) {
  .appFooter {
    display: flex;
    flex-flow: row wrap;
  }
  .appFooter ul.navigation {
    margin: 0;
    order: 2;
    text-align: right;
  }
  .appFooter ul.navigation li {
    display: inline;
    margin-right: 20px;
  }
  .appFooter ul.navigation li:last-child {
    margin-right: 0;
  }
  .appFooter .copyright {
    order: 1;
    text-align: left;
  }
  .appFooter > * {
    flex: 1;
  }
}

<footer class="appFooter">
  <ul class="navigation">
    <li><a href="/">Contact Us</a></li>
    <li><a href="/">Terms of Service</a></li>
    <li><a href="/">Privacy Policy</a></li>
  </ul>
  <div class="copyright">
    <span>&copy; 2018 Site</span>
  </div>
</footer>

Answer 1

是的，我会说你的代码（CSS和HTML）都有简化的空间。

这应该是你所需要的：

.appFooter {
  text-align: center;
}

.navigation {
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
}

@media (min-width: 900px) {
  .appFooter {
    display: flex;
    justify-content: space-between;
  }
  .navigation {
    flex-direction: row;
    order: 1;
    margin: 0;
  }
  .navigation a + a {
    margin-left: 20px;
  }
}

<footer class="appFooter">
  <nav class="navigation">
    <a href="/">Contact Us</a>
    <a href="/">Terms of Service</a>
    <a href="/">Privacy Policy</a>
  </nav>
  <div class="copyright">&copy; 2018 Site</div>
</footer>

https://jsfiddle.net/1sw59n4v/

Answer 2

对于桌面视图，您无需担心所有 order 和 text-align 声明，因为您可以实现与 flex-direction: row-reverse 相同的结果。请注意，您仍然希望允许元素跨越一行，您还需要使用 flex: inherit 删除子项上的flex。< / p>

另请注意，在您的示例中，媒体查询中包含 display: flex 等内容。这些不需要在媒体查询中重新声明，因为规则是继承的：）

以下是使用flex-direction: row-reverse删除重新声明的示例：

.appFooter {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  text-align: center;
}

.appFooter ul.navigation {
  margin: 0 0 48px 0;
  padding: 0;
  list-style: none;
}

.appFooter > * {
  flex: 1 100%;
}

@media only screen and (min-width: 900px) {
  .appFooter {
    flex-direction: row-reverse;
  }
  
  .appFooter > * {
    flex: inherit;
  }
  
  .appFooter ul.navigation li {
    display: inline;
    margin-right: 20px;
  }

  .appFooter ul.navigation li:last-child {
    margin-right: 0;
  }
}

<footer class="appFooter">
  <ul class="navigation">
    <li><a href="/">Contact Us</a></li>
    <li><a href="/">Terms of Service</a></li>
    <li><a href="/">Privacy Policy</a></li>
  </ul>
  <div class="copyright">
    <span>&copy; 2018 Site</span>
  </div>
</footer>

这会减少超过一半的媒体查询声明，从而得到完全相同的结果。

希望这有帮助！ ：）

Answer 3

您可以优化/缩短该代码，同时提高其渲染灵活性。

只需移除除实际链接a和版权span之外的所有元素，即可轻松控制其堆叠/渲染顺序和对齐方式。

最初设置：

• flex-direction: column，垂直方向

• margin: 48px 0 0 0，版权上限

使用媒体查询：

• flex-direction: row，切换到水平方向

• order: -1，按照顺序排列版权，使其左对齐

• margin: 0 auto 0 0，重置顶部并将链接推向右侧，使其右边距“自动”

Stack snippet

.appFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.appFooter span {
  margin: 48px 0 0 0;
}
@media only screen and (min-width: 900px) {
  .appFooter {
    flex-direction: row;
  }
  .appFooter span {
    order: -1;
    margin: 0 auto 0 0;
  }
  .appFooter a + a {
    margin-left: 10px;
  }
}

<footer class="appFooter">
  <a href="/">Contact Us</a>
  <a href="/">Terms of Service</a>
  <a href="/">Privacy Policy</a>
  <span>&copy; 2018 Site</span>
</footer>

如果您仍想包装链接，只需将其选择器添加到.appFooter {...}规则。

Stack snippet

.appFooter, .appFooter nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.appFooter span {
  margin: 48px 0 0 0;
}
@media only screen and (min-width: 900px) {
  .appFooter, .appFooter nav {
    flex-direction: row;
  }
  .appFooter span {
    order: -1;
    margin: 0 auto 0 0;
  }
  .appFooter a + a {
    margin-left: 10px;
  }
}

<footer class="appFooter">
  <nav>
    <a href="/">Contact Us</a>
    <a href="/">Terms of Service</a>
    <a href="/">Privacy Policy</a>
  </nav>
  <span>&copy; 2018 Site</span>
</footer>