有什么方法可以使用 flex wrap 只在一列上换行吗？

Question

假设我有 3 个 div...

HTML:

<section class="features">
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
</section>

CSS:

.section {
  display: flex;
  flex-wrap: wrap;
}

所以我想要的是当我减小屏幕尺寸时让这些项目只在一列上换行...

The current behavior is like this on medium screen size

I want the behavior to be like this in all other screen sizes

Answer 1

你可以在媒体查询中调用它你想做这样的事情吗？请告诉我

section.features {
  display: flex;
  justify-content:space-around;
  padding:10px;
}

@media only screen and (max-width:768px){
section.features {display: grid;}
}

RESIZE ME
<section class="features">
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div class="item">
        <h3 class="item-name">Item1</h3>
        <p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
</section>

Answer 2

<section class="features">
  <div class="item">
    <h3 class="item-name">Item1</h3>
    <p class="item-desc">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
  <div class="item">
    <h3 class="item-name">Item1</h3>
    <p class="item-desc">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
  <div class="item">
    <h3 class="item-name">Item1</h3>
    <p class="item-desc">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
</section>

CSS - 我用过 flexbox

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .features {
        display: flex;
        flex-wrap: wrap;
      }
      .features .item {
        /*flex: 0 0 100%;*/ /*remove if you don't want media query*/
        max-width: 384px;/*add if you don't want media query*/
        width: 100%;/*add if you don't want media query*/
        padding: 0 1rem;
        margin-bottom: 1rem;
      }

 /*remove if you don't want media query*/
/*@media (min-width: 768px) {
        .features .item {
          flex: 0 0 33.33%;
        }
      }*/

有什么方法可以使用 flex wrap 只在一列上换行吗？

Is there any way to use flex wrap to wrap on only one column?

html

css

layout

flexbox