Flexbox: 4 Items Per Row

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

3 items per row with flexbox and gap

Use CSS-Grid instead?

body {
  background-color: lightgreen;
  margin: 10px;
  text-align:center;
}

.parent {
  display: inline-grid;
  width:80%;
  background-color: coral;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.child img {
  width: 100%;
  min-width: 0;
}
<div class="parent">

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

</div>

How to set 3 items per row using flex when item has margin and border

You can use width: calc(100%/3 - 12px); on .item.

The 100%/3 will do 3 in a row. Then the -12px accounts for margin: 5px both sides = 10px. Then the same with border. 1px on either side affecting the width gives you 2px. For a total of 12px.

Note: you can use box-sizing: border-box; on .item to avoid having to use the 1px on either side of the border in the calculation.

.App {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.parent {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  margin: 5px;
  width: calc(100%/3 - 12px);
  /*box-sizing: border-box; - would make the calc -10px instead of -12px*/
}
<div class="App">
  <div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Flexbox limit items per row without the width of the child elements changing

You need a separate CSS rule for the image inside the .child divs. Then move the properties targeting the image to that new rule:

.child img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

I added some flexbox rules to the .child divs to center the image inside .child. Now the .child divs are just concerned with dividing the space up so there are always 4 across and the styling of the images is independent of that.

.parent {  display: flex;  flex-wrap: wrap;  justify-content: center;}
.child {  flex: 0 0 25%;    /*for aligning image inside .child */  display: flex;  justify-content: center;}
.child img {  border-radius: 50%;  width: 65px;  height: 65px;}
<div class="container">  <div class="parent">    <div class="child"><img src="http://placehold.it/200x200" /></div>    <div class="child"><img src="http://placehold.it/200x200" /></div>    <div class="child"><img src="http://placehold.it/200x200" /></div>    <div class="child"><img src="http://placehold.it/200x200" /></div>    <div class="child"><img src="http://placehold.it/200x200" /></div>    <div class="child"><img src="http://placehold.it/200x200" /></div>    <div class="child"><img src="http://placehold.it/200x200" /></div>  </div></div>

Display different number of items per row

You can use flexbox and flex like below:

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

.gallery > img {
  flex: calc(100%/3); /* 3 images per row */
  min-width: 0;
  outline:1px solid red;
}
/* until the 9th 4 images per row */
.gallery > :nth-child(-n + 9) {
  flex: calc(100%/4);
}
/* until the 5th 5 images per row */
.gallery > :nth-child(-n + 5) {
  flex: calc(100%/5);
}
<div class="gallery">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
</div>

Set flex columns per row with dynamic number of items

Try this

.items {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #cecece;
}

.item {
  height: 100%;
  margin: 4px;
  background: #16B6B6FF;
  width: 100%;
  max-width: calc(25% - 8px);
}

Related Topics

Input Type="Submit" VS Button Tag Are They Interchangeable

Is There a CSS Selector For the First Direct Child Only

How to Customize ≪Input Type="File"≫

How to Style Html5 Audio Tag

How to Change the Color of Radio Buttons

Vertical Text Direction

Styling Text Input Caret

Html Embedded Pdf Iframe

Css Content Generation Before or After 'Input' Elements

Css :Selected Pseudo Class Similar to :Checked, But For ≪Option≫ Elements

Why Are Nested Anchor Tags Illegal

How to Have Two Background Colors For a Single HTML Element

How to Create a Checkbox With a Clickable Label

Adding a Favicon to a Static HTML Page

How to Make Blinking/Flashing Text With CSS 3

Is There an Equivalent to Background-Size: Cover and Contain For Image Elements

Maintain Aspect Ratio of Div But Fill Screen Width and Height in Css

Css - How to Style a Selected Radio Buttons Label


Leave a reply



Submit