html - Flex-Basis 不工作

Question

我有 3 个元素，我正在尝试使用 flex-basis 使它们并排占据屏幕的 20%、20% 和 60%(按此顺序)，当窗口大小减小时，它们会进入专栏，问题是我的 flex-basis 什么都不做，我删除了它，它仍然和现在一样，有帮助吗？

HTML:

<section class="number2">
<h2 class="white">The Scoville Scale</h2>
<article class="two"> The Scoville Unit (SHU) scale is a method of
quantifying a substance's 'spiciness', through determining the concentration
of the chemical compounds responsible for the sensation, which are named
capsaicinoids. We have American chemist Wilbur Scoville to thank for the
scale that rates the chillies we chomp. In 1912, long before high-pressure
liquid chromatography tests in labs, he relied on taste alone. A grain of
chilli was dissolved in an alcoholic solution added to sweetened water until
it could barely be noted by a panel of testers. The more dilution required,
the higher the rating.
</article>
<figure class="tes">
<img src="https://www.alimentarium.org/en/system/files/styles/full_wide/private/thumbnails/image/EMAG_INFO_piment_scoville_EN.png?itok=IqE8GNK6">
</figure>
</section>

CSS:

.number2 {
  background-color: #df506e;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;

}

.white {
  color: white;
  flex-basis: 20%;
    flex-shrink: 0;
}

.two {
  flex-basis: 20%;
  color: white;
    flex-shrink: 0;
}

.tes {
  flex-basis:60%;
    flex-shrink: 0;
}

Answer 1

给你。

我宁愿使用 flex:1 0 x% 的 flex 速记。然后就是重置任何默认边距(尤其是在 figure 上)和媒体查询。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.number2 {
  background-color: #df506e;
  display: flex;
}

.white {
  color: white;
  flex: 1 0 20%;
}

.two {
  color: white;
  flex: 1 0 20%;
}

.tes {
  margin: 0;
  flex: 1 0 60%;
}

.tes img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .number2 {
    background-color: rebeccapurple;
    /* for demo purposes */
    display: flex;
    flex-direction: column;
  }
}

<section class="number2">
  <h2 class="white">The Scoville Scale</h2>
  <article class="two">
    <p>The Scoville Unit (SHU) scale is a method of quantifying a substance's 'spiciness', through determining the concentration of the chemical compounds responsible for the sensation, which are named capsaicinoids. We have American chemist Wilbur Scoville
      to thank for the scale that rates the chillies we chomp. In 1912, long before high-pressure liquid chromatography tests in labs, he relied on taste alone. A grain of chilli was dissolved in an alcoholic solution added to sweetened water until it
      could barely be noted by a panel of testers. The more dilution required, the higher the rating.</p>
  </article>
  <figure class="tes">
    <img src="https://www.alimentarium.org/en/system/files/styles/full_wide/private/thumbnails/image/EMAG_INFO_piment_scoville_EN.png?itok=IqE8GNK6">
  </figure>
</section>

Codepen demo