我怎样才能实现这个响应式的 flexbox 布局？答案

【问题标题】：How can I implement this responsive flexbox layout?我怎样才能实现这个响应式的 flexbox 布局？
【发布时间】：2020-06-11 12:30:49
【问题描述】：

我正在尝试设计一个简单且响应迅速的主页布局。为了让事情变得更高效、更简单（希望如此），我使用了 flexbox。

我的想法是有一个居中的主标题（“这是 Flexbox”），下面有两个可点击的按钮（“试试看”和“关于”）。

我还添加了一个媒体查询，以尝试在宽度低于 640 像素的屏幕中以不同方式调整 flexbox 设置，但我无法让 flexbox 双向工作；更具体地说，当屏幕宽度低于 640 像素时，我希望这两个按钮作为列堆叠在一起，并修改它们的大小并保持居中。

现在，我的问题是：

链接颜色不起作用并保持蓝色而不是橙色；
标题框与整个页面一样大，而不是它包含的文本；
媒体查询（我尝试在 640 像素或更大的屏幕中以不同方式使用 flexbox）似乎被媒体查询本身之外的 flexbox 命令“覆盖”；
命令：flex-flow:column 不起作用。

CodePen code link

a {
  text-decoration: none;
}

body {
  font-family: 'century gothic', sans-serif;
  background: black;
  box-sizing: border-box;
}

@media(min-width:640px) {
  .buttons {
    display: flex;
    flex-flow: row;
    justify-content: center;
    color: ivory;
    margin: 0 100;
  }
  .buttons .btns {
    border: solid red 1px;
    background: #ff7b25;
    padding: 10;
    border-radius: 10px;
    color: ivory;
  }
  .buttons .btns:hover {
    background-color: white;
    color: #ff7b25;
    transition: .5s;
  }
}

.buttons {
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
  border: solid red 1px;
  margin: 10 50;
  color: ivory;
}

.buttons .btns {
  text-align: center;
  border: solid red 1px;
  background: #ff7b25;
  border-radius: 10px;
  color: ivory;
  margin: 10px;
}

.buttons .btns:hover {
  background-color: ivory;
  color: #ff7b25;
  transition: .5s;
}

.title {
  border: solid red 1px;
  margin-top: 150px;
  display: flex;
  justify-content: center;
}

.title .t1 {
  border: solid red 1px;
  background: #2f2a2a;
  padding: 5 10;
  color: ivory;
}

.title .t2 {
  border: solid red 1px;
  color: ivory;
  letter-spacing: 3px;
  font-style: oblique;
  background: #ff7b25;
  padding: 5 10;
}

<div class="title">
  <div class="t1">
    <h1>This is</h1>
  </div>
  <div class="t2">
    <h1>FLEXBOX</h1>
  </div>
</div>
<div class="buttons">
  <div class="btns">
    <h3><a href="#">Free trial</a></h3>
  </div>
  <div class="btns">
    <h3><a href="#">About</a></h3>
  </div>
</div>

【问题讨论】：

标签： html css flexbox responsive

【解决方案1】：

链接颜色：

您需要在a 选择器中添加color 属性，而不是在.btns 中。

标题框：

为了正确居中，您的 flexbox 应该与站点一样宽，并且其元素居中，这是正确的。只需不对其应用任何样式，使其宽度不可见。如果您需要一个围绕孩子的盒子，您应该将它们包裹在一个容器中（然后成为弹性项目）。

媒体查询：

您的 CSS 顺序错误，请将 @media 放在末尾，因为它是，您应用 @media 规则，然后始终用您的非特定 CSS 进一步覆盖它。

【讨论】：

感谢您的回答！ - 以您建议的方式添加颜色的问题是它覆盖了悬停功能，使整个框和文本一样变白。 - 我将盒子包裹在红色边框中，以更好地了解 flexbox 的功能。我仍然不明白为什么标题框没有沿其总长度（在这种情况下是整个页面的长度）填充标题本身。换句话说：为什么标题没有延伸到盒子的整个长度？
flexbox 容器的子元素有flex-grow: 0 和flex-basis: auto 除非另有说明，这就是为什么你的 div 不会拉伸整个屏幕宽度的原因。

【解决方案2】：

让我一个接一个地解决你的问题：

链接颜色不起作用并保持蓝色而不是橙色

通过将color: inherit; 添加到a {}，您可以使其尊重颜色。（阅读有关级联的更多信息以了解更多信息）。

标题框与整个页面一样大，而不是它包含的文本

当然，因为它是一个“块”元素（而不是“内联”元素）。您可以从.title 中删除边框定义以使其看起来像您期望的那样？

媒体查询，我尝试在 640 像素或更大的屏幕中以不同方式使用 flexbox，似乎被媒体查询本身之外的 flexbox 命令“覆盖”

在 CSS 中，后面的定义会覆盖前面的定义。尝试将媒体查询移到文件末尾。

命令：“flex-flow:column”不起作用。

您能详细说明一下吗？

【讨论】：

非常感谢您的回答！ - 完美解决了颜色问题！但这提出了另一个问题：代码在世界上哪里将颜色设置为当我删除此类属性时出现的蓝色？ - 如果我删除边框，标题框的大小不会有任何变化...
这就是用户代理风格（阅读：由浏览器设置）。您可以使用浏览器开发工具中的“检查器”选项卡进行检查。
也许是因为我把标题分成了两个不同的部分，样式不同？所以内容被视为两个单独的框...

【解决方案3】：

我只打算进入 flex-flow，因为我看到其他答案都得到了很好的回答。

flex-flow 是两个 CSS 属性 flex-direction 和 flex-wrap 的简写。我相信仅仅放置列 flex-flow 是不够的。我认为您需要添加另一个值换行或不换行。

flex-flow: column wrap;

【讨论】：