Can Flexbox Divide Items Evenly on Multiple Rows

Can flexbox divide items evenly on multiple rows?

No, not without media queries adjusting the flex-basis value. Flex items that stretch and wrap attempt to maximize the amount of items that fit on each row.

You may want to consider using the multi-column module instead, which will attempt to equally distribute elements across all of the columns created:

.foo {
    columns: 100px;
}

http://caniuse.com/#feat=multicolumn

How to evenly divide flex box items into two rows?

UPDATE: Try CSS-GRIDS, that's more powerful and you need pretty less code as well :)

Setting 2 rows instead of 2 columns:)

.flexbox {
    display: grid;
    grid-template-rows:repeat(2,150px);
    grid-auto-flow: column; 
    column-gap:1rem;
    row-gap:10px;
}

.flex-item {   
    flex-basis: 280px;
    flex-shrink:none;
    height: 150px;
    background:red;
    margin-right:10px;
    margin-bottom:10px;
}

<div class="flexbox">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Distribute flex items evenly when they wrap

What I had to eventually do was calculate the number of boxes per row (server side) and then use that to get the minimum width for each box, and applied it to each one with inline css.

edit: I know it's not good, but this is still the only answer. You can't do it with CSS.

Is it possible to display flexbox items in two rows instead of one?

You can do this using CSS grid:

.items-list {
  display: grid;
  grid-template-rows: 50px 50px; /* 2 rows of 50px */
  grid-auto-flow: column;  /* a column flow */
  grid-auto-columns:100px; /* each column will 100px of width */
  grid-gap: 5px;
  overflow: auto;
}
.item {
  border:2px solid red;
}

<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Flex Wrap and Evenly Distribute Between Rows

You can add flex-grow: 1 to your children elements to make them fill the empty space.

https://jsfiddle.net/sabvyfow/

If you want an even number in each column that breaks dynamically, you will probably have to resort to media queries at certain break points: https://www.w3schools.com/css/css3_mediaqueries.asp

How to divide to rows using flex - HTML CSS

The key to flexbox is proper sectioning of items into containers. In the sample pic you have provided we have one big container, which you can further section into header and main. The header and main are in column layout. main further consists of four containers (column layout), each of which contains more items (row layout).

div {
  border: 1px solid #000;
  text-align: center;
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
}

main {
  display: flex;
  flex-direction: column;
}

.row-2 {
  display: flex;
}

.row-3 {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="myStayle.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <header>
      <div>LOGO</div>
      <div>Menu</div>
    </header>
    <main>
      <div class="row-1">picture</div>
      <div class="row-2">
        <div>text1</div>
        <div>text2</div>
      </div>
      <div class="row-3">
        <div>pic</div>
        <div>link</div>
        <div>text</div>
      </div>
      <div class="row-4">
        <div>footer</div>
      </div>
    </main>
  </div>
</body>

</html>

How to display 3 items per row in flexbox?

Flex container:

You probably want to use display: flex not inline-flex.
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%.

.serv ul {

  display: flex;

  flex-wrap: wrap;

  padding-left: 0;

}

.serv ul li {

  list-style: none;

  flex: 0 0 33.333333%;

}

<div class="serv">

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

  </ul>

</div>

Flexbox: 4 items per row

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>

How to make flexbox items the same size?

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:

flex: 1 1 0px

Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by @fabb;

Can Flexbox Divide Items Evenly on Multiple Rows