CSS：Flexbox 属性默认卡住 - 拉伸答案

【问题标题】：CSS: Flexbox Property Stuck At Default - StretchCSS：Flexbox 属性默认卡住 - 拉伸
【发布时间】：2022-02-02 17:35:15
【问题描述】：

大家好！我刚开始学习弹性盒子。我应用了 align item: stretch 属性，它给了我预期的结果。我立即从我的 CSS 中删除了样式，这样我就可以继续我的课程了，但是浏览器仍然表现得像我仍然有 align-item:stretch 属性一样。

我已经删除了我的浏览器缓存/数据，使用不同的浏览器加载，但它仍然给我同样的问题。我几乎很沮丧，请帮助我。我目前正在使用 Chrome 浏览器。

【问题讨论】：

我最初在这里留下了一些可能解释问题的想法，但我认为下面的完整答案清楚地表明了问题。不要被我的代码的大小吓倒，它只是重复以直观地向您展示更改。

标签： html css flexbox css-selectors stretch

【解决方案1】：

这是我为你准备的。因此，我在下面有一个示例，可以准确解释您遇到此问题的原因，但让我解释一下我的代码。

container 和 container1 表明拉伸是 flexbox 的默认行为，因此即使您删除代码也不会发生任何事情。
container3-reverse-axis 向您展示了我给出的示例在您反转轴时默认情况下的外观。
container3-flex-end 向您展示如果您现在将其设置为 flex-end 之类的任何其他值会发生什么。
container4-default 和 container4-justify 向您展示了您可能正在寻找并期望首先发生的事情。

Here is a great website 详细解释了 flex box。

<!doctype html>
<html lang="en">
<style>
  .box1 {
    background: green;
  }
  
  .box2 {
    background: blue;
  }
  
  .box3 {
    background: red;
  }
  
  .box4 {
    background: magenta;
  }
  
  .box5 {
    background: yellow;
  }
  
  .box6 {
    background: pink;
  }
  
  .box {
    font-size: 15px;
    padding: 15px;
  }
  
  .container {
    display: flex;
    /* stretch is actually the default */
  }
  
  .container1 {
    display: flex;
    align-items: stretch;
  }
  
  .container2 {
    /* stretch changed to flex-end will actually do nothing, you know why? Because its targeting cross axis alignment. So it will only make a difference if you change the axis to column with flex-flow. */
    display: flex;
    align-items: flex-end;
  }
  
  .container3-reverse-axis {
    display: flex;
    align-items: stretch;
    flex-flow: column;
  }
  
  .container3-flex-end {
    display: flex;
    align-items: flex-end;
    flex-flow: column;
  }
  /* You might actually be looking for justify-content instead. */
  
  .container4-default {
    display: flex;
    justify-content: stretch;
  }
  
  .container4-justify {
    display: flex;
    justify-content: flex-end;
  }
</style>

<body>

<h1>Stretch is the Default</h1>

  <div class="container">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

  <div class="container2">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

<h1>This is what happens when you switch to cross-axis alignment</h1>

  <div class="container3-reverse-axis">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

  <div class="container3-flex-end">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>
  <h1>This is what you probably expected to happen.</h1>

  <div class="container4-default">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

  <div class="container4-justify">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>
</body>

</html>

【讨论】：

谢谢...我会通过它。也感谢您的网站。

【解决方案2】：

这似乎是一件非常不寻常的事情。除非您将代码与问题一起发布，否则我对此没有任何建议。

也许我们可以在代码中找到一些错误。

在此之前，您是否绝对 100% 确定在尝试查看结果之前保存了 HTML 和 CSS 页面？问这个是因为这样的事情不太可能发生。

;)

【讨论】：

是的，我保存了它。我所做的任何其他更改都在反映出来，但看起来即使我从 CSS 中删除了这行代码，拉伸也不会离开。我会把代码上传给你看。