Flex堆栈列

Question

就屏幕响应度大小而言，使flex列的堆栈最好的方法是什么？

下面，我尝试添加一个响应式查询以将flex列的值更改为2，但似乎并没有解决问题。

.blurb-container {
  display: flex;
}

.blurb-half-column {
  flex: 1;
  margin-right: 40px;
}

.blurb-container>div:last-child {
  margin-right: 0;
}

.justify {
  text-align: justify;
}

@media only screen and (max-width: 414px) {
  .blurb-half-column {
    flex: 2;
  }
}

<div class="blurb-container">
  <div class="blurb-half-column">
    <p class="justify">Once you have completed your training and you have been certificated, we ask that you submit the required amount of ‘post training in clinic evidence’ and case studies within a 2 month period. This may be in the form of witness statements, client
      testimonials, photographic evidence, and reflection. You will learn more about post study on your training days and you will be provided with a work study pack to assist you.</p>
  </div>
  <div class="blurb-half-column">
    <p class="justify">This course is for CTIA members only (please see our members section). It can be taken alongside basic Wrinkle Relaxing training or as a stand-alone course.</p>
    <p class="justify">This course price is discounted if taken alongside the basic module.</p>
    <p class="justify">*Please note all prices quoted for training are exclusive of VAT. VAT is 20% of any course quotations and is to be added to cost.</p>
  </div>
</div>

Answer 1

您可以考虑将flex-wrap和min-width作为元素

.blurb-container {
  display: flex;
  flex-wrap:wrap;
}

.blurb-half-column {
  flex: 1;
  margin-right: 40px;
  min-width:300px;
}

.blurb-container>div:last-child {
  margin-right: 0;
}

.justify {
  text-align: justify;
}

<div class="blurb-container">
  <div class="blurb-half-column">
    <p class="justify">Once you have completed your training and you have been certificated, we ask that you submit the required amount of ‘post training in clinic evidence’ and case studies within a 2 month period. This may be in the form of witness statements, client
      testimonials, photographic evidence, and reflection. You will learn more about post study on your training days and you will be provided with a work study pack to assist you.</p>
  </div>
  <div class="blurb-half-column">
    <p class="justify">This course is for CTIA members only (please see our members section). It can be taken alongside basic Wrinkle Relaxing training or as a stand-alone course.</p>
    <p class="justify">This course price is discounted if taken alongside the basic module.</p>
    <p class="justify">*Please note all prices quoted for training are exclusive of VAT. VAT is 20% of any course quotations and is to be added to cost.</p>
  </div>
</div>

Answer 2

尝试以下操作：

.blurb-container{
   display: flex;
   flex-wrap: wrap;
}
.blurb-half-column{
   width: 50%;
}
@media(max-width: 414px){
  .blurb-half-column{
     width: 100%;
  }
}

只需在列上添加flex-wrap属性和宽度，即可实现所需的功能。 同样，“最小宽度”也可以使用。使用最小宽度，您甚至不需要媒体查询。