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示范