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

Let's say I have 3 divs...

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

So what I want is to make these items wrap on only one column when I reduce my screen size...

The current behavior is like this on medium screen size

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

htmlcsslayoutflexbox


Solution 1:[1]

<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 - I have used 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%;
        }
      }*/

Solution 2:[2]

You can call that on media query Are you trying to do something like this??Let me know

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 Crystal

Related Questions