针对不同宽度优化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删除孩子们的flex: inherit。

另请注意，在您的示例中，您在媒体查询中有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，重置顶部并将链接推向右边，使其右边距“自动”

堆栈代码段

.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 {...}规则。

堆栈代码段

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