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

Let's say I have 3 divs...

HTML:

<section >
    <div >
        <h3 >Item1</h3>
        <p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div >
        <h3 >Item1</h3>
        <p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div >
        <h3 >Item1</h3>
        <p >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

CodePudding user response：

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 >
    <div >
        <h3 >Item1</h3>
        <p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div >
        <h3 >Item1</h3>
        <p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
    <div >
        <h3 >Item1</h3>
        <p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
    </div>
</section>

CodePudding user response：

Please let me know if this code works for you and is this what you want?

<section >
  <div >
    <h3 >Item1</h3>
    <p >
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
  <div >
    <h3 >Item1</h3>
    <p >
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
      quaerat molestiae sed quis labore.
    </p>
  </div>
  <div >
    <h3 >Item1</h3>
    <p >
      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%;
        padding: 0 1rem;
        margin-bottom: 1rem;
      }

      @media (min-width: 768px) {
        .features .item {
          flex: 0 0 33.33%;
        }
      }