Flexbox: 4 items per row

flexbox max two items per row
flex column wrap
flex-wrap space between rows
flex item new row
flex-basis
flex-fill
flexbox cheat sheet
flexbox push item to next line

I'm using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?

Here is a relevant snip:

(Or if you prefer jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

You've got flex-wrap: wrap on the container. That's good, because it overrides the default value, which is nowrap (source). This is the reason items don't wrap to form a grid in some cases.

In this case, the main problem is flex-grow: 1 on the flex items.

The flex-grow property doesn't actually size flex items. Its task is to distribute free space in the container (source). So no matter how small the screen size, each item will receive a proportional part of the free space on the line.

More specifically, there are eight flex items in your container. With flex-grow: 1, each one receives 1/8 of the free space on the line. Since there's no content in your items, they can shrink to zero width and will never wrap.

The solution is to define a width on the items. Try this:

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

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

5 items per row, auto-resize items in flexbox, You are right in giving a flex-basis: 20% but you have to adjust for the 4px margin on each flex item for it to wrap properly. Equal Width Flex items in the last row. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. The flexbox properties are supported in all modern browsers. To start using the Flexbox model, you need to first define a flex container. The element above represents a flex container (the blue area) with three flex

Add a width to the .child elements. I personally would use percentages on the margin-left if you want to have it always 4 per row.

DEMO

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}

Mastering Wrapping of Flex Items, 3 elements per row for wrapping flexbox How can I have only three elements per row? Things like the CSS grid and Bootstrap also confuse me a lot. Adding a margin-right to our items would add that space, but also causes the last item in every row to have a right margin that just isn’t needed. Using :last-child won’t work, since the last item in a column could be items 4 and 8 of 9 total. We really need :last-column-in-this-row but I don’t think that selector exists.

Here is another apporach.

You can accomplish it in this way too:

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

.child{
  width: 25%;
  box-sizing: border-box;
}

Sample: https://codepen.io/capynet/pen/WOPBBm

And a more complete sample: https://codepen.io/capynet/pen/JyYaba

3 elements per row for wrapping flexbox : css, I'm using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)? Here is a relevant  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.

<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>

Hope it helps. for more detail you can follow this link

Flexbox: 4 items per row, If you want the first row to be full-width and the two following items to align-​items of the container to flex-end and define a height for each bar. In order to get started with Bootstrap 4 Flex Layout we first need to setup a basic Bootstrap 4 project. We’ll then use this project to demonstrate the various options of the Bootstrap Flex Layout.

I would do it like this using negative margins and calc for the gutters:

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
}

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

Demo: https://jsfiddle.net/9j2rvom4/


Alternative CSS Grid Method:
.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Demo: https://jsfiddle.net/jc2utfs3/

Common CSS Flexbox Layout Patterns with Example Code, Create a flex container; Put flex items in a row; Put flex items into a column; Move The main axis is horizontal by default, so the items flow into a row. property gives you options for distributing the space around wrapped rows or columns. Flex items in last row expands to fill the available space. If in a row you have less than 5 items and you want them to fill in the remaining space use flex: 1 1 calc(20% - 8px) (note that flex-grow is set to 1 here so that the flex items in the last rows expand to fill the remaining space):

Mastering CSS Layout with Flexbox, October 14, 2016 at 11:49 am #246538 · Ayala. Participant. Now I have 5 items in a row, but I want exactly 4, because I want bigger pictures. There is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. It deals with space distribution across the main axis. If there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container.

Flex-box: how many items in one row?, flex-item-1">1</div>. 3. <div class="flex-item flex-item-2">2</div>. 4. <div class​="flex-item flex-item-3">3</div>. 5. <div class="flex-item flex-item-4">4</div>. 6. row (default) row-reverse column column-reverse flex-wrap whether items wrap to the next row column (only applies if combined width height of items is greater than container's)

4 Column Flexbox, See how there are 4 on top and 2 on bottom, I'd rather 3 and 3. the container is there a way to limit the number of collection items on a row? to display as Flexbox and select wrap children; Set the Collection Item Div which  With flex-grow: 1 defined in the flex shorthand, there’s no need for flex-basis to be 25%, which would actually result in three items per row due to the margins.. Since flex-grow will consume free space on the row, flex-basis only needs to be large enough to enforce a wrap.

Comments
  • [Update] This question was based on a poor unresponsive design. If you find yourself using one of the answers below, be careful. In a good design, you'd have more items on wider screens, and fewer on smaller screens. Forcing 4 items for all screen sizes will only look appealing on a narrow range of screen widths.
  • I like this because it worked for me, but "plenty of space" makes me feel a little uneasy. Is there some tiny window or situation where this "estimation" might fail me?
  • What sort of situation? In most layouts there are extreme cases that can create problems. Such cases normally sail through cost-benefit analyses because they never, or almost never, occur. For instance, in the solution above, if you put in very large margins, the layout may break. If that's an issue, then it should be posted in the question. @Jackson
  • "if you put in very large margins, the layout may break" That’s an example of a scenario I’d like to avoid. I don’t care about practicality; entertain my adoration for perfection. Is there any way to be more exact?
  • You can also use flex: 1 0 calc(25% - 10px);
  • Great answer! A small improvement I use is margin: 2%; instead of a fixed pixel number in order to prevent the boxes from jumping to a new line on small devices/resolutions. the general formula is (100 - (4 * box-width-percent)) / 8% for different box widths
  • Good idea. I used this idea with minor edits. jsfiddle.net/vivmaha/oq6prk1p/6
  • Ah. This actually doesn't solve my problem. See here for an example: jsfiddle.net/vivmaha/oq6prk1p/7. I do not have the liberty of using percentages for my margin. They must be a fixed width. This means that the magic 23% that we chose won't work since it doesn't take the fixed margin into account.
  • Yes, calc solves it! 'calc(100% * (1/4) - 10px - 1px)'. See jsfiddle.net/vivmaha/oq6prk1p/9
  • Then what's the use of flex in this, still?
  • What about responsive design? We don't want to put a fixed width on child