Question

我有3个项目，我正在尝试使用flex-basis使它们并排占据屏幕的20％20％和60％（按此顺序）并且当窗口大小减小时它们会进入专栏，我的弹性基础是什么都没做，我删除它，它现在保持平等，一些帮助？

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%的弹性简写。然后重置任何默认边距（尤其是在figure上）和媒体查询。

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

Codepen demo

Flex-Basis不起作用

1 个答案: