How do I wrap row items using CSS Flexbox?

I'm fairly new to CSS Flexbox but I'm trying to create a horizontal card, where an image is on the left, and text/buttons are on the right. When the site is scaled down (for mobile use), the row items should wrap and the image should sit on top of the text. I've tried setting the wrap property to wrap but it wraps for large screens when it should only wrap for smaller screens. See code below:

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      Other stuff
    </div>
  </div>
</div>

Set a flex-basis to the text container to control when the wrap should happen.

Open the below on full screen and resize to see:

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  
  flex-basis:500px;
  flex-grow:1;
}
<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      Other stuff
    </div>
  </div>
</div>

flex-wrap, By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. .container { flex-� Horizontally aligns the flex items when the items do not use all available space on the main-axis: align-items: Vertically aligns the flex items when the items do not use all available space on the cross-axis: flex-wrap: Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line: align-content

The image is on the left.

The text is on the right.

As soon as the first line of text reaches the right side of the container, the entire item will wrap.

It's tempting to think that once the first line reaches the right-side limit, just the text will wrap.

That's not how it works.

That touch will trigger the entire item to wrap.

Try it out: jsFiddle demo

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
}

#inner-container {
  border: solid 1px;
  display: flex;
  min-width: 0;
}
<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" width=50 height=50 alt="cat">
  <div id="inner-container">
    <p>Re-size the screen. Once this text touches the right side, the item will wrap.</p>
  </div>
</div>

A Complete Guide to Flexbox, .container { display: flex; flex-wrap: wrap; } Using an element to break to a new flex row comes with an We can, for example, use it to build a masonry layout with CSS only, and position the breaks dynamically with the� Default value. Specifies that the flexible items will not wrap: Play it » wrap: Specifies that the flexible items will wrap if necessary: Play it » wrap-reverse: Specifies that the flexible items will wrap, if necessary, in reverse order: Play it » initial: Sets this property to its default value. Read about initial: Play it » inherit

Assuming I understood your question correctly, I believe I've come up with something that resembles a solution.

I altered your code ever so slighty, and worked with the flex-direction attritube. Basically what I've done is, when you're on desktop version, your card used the attribute flex-direction: row to have your items inside of your div be aligned like you described.

When you swicth to mobile version, the only thing I've done is add a media query that tells the div to use the flex-direction: column, in order to have the items inside you div be aligned like you described.

In this solution, you avoid switching to Bootstrap, by utilizing flexbox and the use of media queries like @DevLover mentioned.

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  border: solid 1px;
  width: 70%;
  flex-direction: row;
}

#inner-container {
  border: solid 1px;
}

@media only screen and (max-width: 768px) {
    #outer-container {
        flex-direction: column;
    }
  }
<div id="outer-container">
        <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
        <div id="inner-container">
            <h3>Heading</h3>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <div>
                Other stuff
            </div>
        </div>
    </div>

Mastering CSS Layout with Flexbox, This is the reason items don't wrap to form a grid in some cases. <style type=" text/css"> .parent{ display: flex; flex-wrap: wrap; } .parent .child{ flex: 1 1 25%; }� Hi there, I would have a little question. Would it be possible with flexbox to wrap on a new line even if there would be enough space for all items on the same line. What I’m trying to achieve is the following: 1. 3 items having a widht of 1/4 page 2. Having only 2 items on the first row, with space-around styling 3.

HTML:

<div id="outer-container">
  <div class="content-wrapper">
    <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
    <div id="inner-container">
      <div>
        <h3>Heading</h3>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div>
        Other stuff
      </div>
    </div>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 100%;
  object-fit: cover;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 767px) {
  .content-wrapper {
    flex-direction: row;
  }

  img {
    width: 200px;
  }
}

Breaking to a new row with flexbox, Once there's a flex container, flex-wrap can be declared on that same parent element to determine how to handle child elements that do not fit on one line by� We wouldn’t be able to do so without resorting to setting flex-basis or width on at least some of the items (or creating a nested flexbox layout with one flex item for every row). If all of the items just have different values of flex-grow nothing would make them break to a new row, they’d all just squeeze in on one row together:

Flexbox: 4 items per row, the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline -flex This functionality is exposed through the flex-direction, flex-wrap, and order� Essentially we just blew the row/columns of bootstrap out of the water with 20 lines of CSS. We have a way to create row/column layouts quickly and since we use flexbox we barely have to worry about the layouts breaking, or anything going wrong. It's easily adapted to a wide variety of uses and allows a large amount of customizability.

Improve Responsiveness with flex-wrap in CSS ← Alligator.io, CSS flexbox is great to use for the general layout of your website or app. flex- wrap: wrap will allow items to pop to the next row if there is not� Add flex-wrap: wrap to allow wrapping onto multiple lines. Remove width: 33% if you wish it to take entire space avaiable. For 3 items per row, add on the flex items: flex-basis: 33.333333%; You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333%.

Flex Cheatsheet, This means that we can use the same alignment properties in CSS Grid as This is why, when you declare display: flex all your flex items line up against If you have added flex-wrap: wrap to your flex container, and have� How to Use CSS Flexbox. but if any of the flex items would have a larger width — say 34% as compared to others — then the item will wrap into a new line if the property is set to wrap or

Comments