Display maximum n element of same size equally in a row with flexbox

css equal height rows
css grid
equal height columns flexbox
grid-template-columns
css grid fill remaining height
css equal height columns responsive
flex-grow
equal height divs css

I want to display a maximum of a certain amount, e.g. 3, of elements (e.g. div elements) in a row and all these elements should always have the same width towards each other but the width should still be flexible when resizing. The order of the elements should be from left to right. I want to use Flexbox.

For example, I want to display a maximum of 3 elements in a row, and if I have 4 elements, then the first 3 elements will be displayed in a row from left to right. The fourth element is in the second row at the very left.

The best I could do was this https://jsfiddle.net/r6f5Ltag/3/

.flex-row-container {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.flex-row-container > .flex-row-item {
    flex-grow: 1;
  flex: 1 1 30%;
    height: 100px;
  max-width: 200px;
  float: left;
}

.flex-row-item {
  background-color: #fff4e6;
  border: 1px solid #f76707;
}

But as you can see the elements are centered and the width towards each other don't always stay the same towards each other.


if you want to have the same width and still flexible you should select percent for the width. so instead of "max-width: 200px;" use "max-width: 33%" and if you want the fourth box in the second row start from left so you can set : "justify-content: flex-start;"

  .flex-row-container {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .flex-row-container > .flex-row-item {
    flex-grow: 1;
    flex: 1 1 30%;
    height: 100px;
    max-width: 33%;
  }

  .flex-row-item {
    background-color: #fff4e6;
    border: 1px solid #f76707;
  }

Fluid Width Equal Height Columns, I want to display a maximum of a certain amount, e.g. 3, of elements (e.g. div elements) in a row and all these elements should always have the same width  Let’s learn, how to make the equal height columns using CSS flexbox. The flexbox is a great CSS3 property that allows us to easily handle a difficult task. Making the same size columns in terms of height is a great user experience and has been a need for web designers forever.


This is everything that you need. https://jsfiddle.net/nemanjaglumac/72y6kfrg/1/

No need for nesting of selecting the class with > selector.

.flex-row-container {
  background: #aaa;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-row-item {
  flex-grow: 1;
  height: 100px;
  background-color: #fff4e6;
  border: 1px solid #f76707;
  width: calc((100%/3) - 2px); /* divide by the number of elements and substract the width od the borders */

  &:last-child {
    flex-grow: 0;
  }
}

P.S. Keep in mind that this is SCSS syntax (nesting with &). That will output as .flex-row-item:last-child {...}

EDIT: Actually, flex-grow is redundant in this particular example. Because, we are already defining the width of those elements. So, bottom line, you can write it even shorter as:

.flex-row-container {
  background: #aaa;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-row-item {
  height: 100px;
  background-color: #fff4e6;
  border: 1px solid #f76707;
  width: calc((100%/3) - 2px);
}

New Perspectives HTML5 and CSS3: Comprehensive, Equal height columns have been a need of web designers forever. background​, equal height is irrelevant because you can set that background on a parent element. the idea of fluid width equal height columns is a dang ol' row of table cells. #css-table { display: table; } #css-table .col { display: table-cell; width: 25​%;  If you haven’t had any touch with Flexbox, you’ll be surprised how magical it is. display: flex initiates Flexbox for the container element and flex-wrap: wrap tells to wrap child items rather than fit them onto one line. Repeating display: flex for the child items makes sure the elements have the same heights in their rows.


Making your code more cleaner and easy to read.

.css

.flex-row-container {
    background: whitesmoke;
    display: flex;
    flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.flex-row-item {
  flex-grow: 1;
  height: 100px;
  background-color: #fff4e6;
  border: 1px solid #f76707;
  width: calc((100%/3) - 2px); 
}

.flex-row-item:last-child() {
    flex-grow: 0;
 }

In this part width: calc((100%/3) - 2px); it's to remove some strange margin can be adding.

I'll recommend you use the sass or scss syntax to handle such this.

New Perspectives on HTML5, CSS3, and JavaScript, Create a style rule for the bottom navigation list displaying it as a flexbox row with no wrapping. For each list item within this ul element, set the font size to 2.2em. Using the selector nav#top ul li:nth-of-type(1) for the first list item, create a to have a maximum width of 80 pixels but to shrink at the same rate as the width if  The number of elements may vary and you wish to display them in N columns for large media devices. The items have a base width, but you want them to adjust to fill the space of the row. What this means is that the items can grow to fill in blank spaces, but they cannot shrink. This way, when resizing the window, the number of columns may change to fit the max number of elements respecting the


Basically here is the general answer:
.container {
    display: flex;
    flex-wrap: wrap;
}

.container > div {
    width: calc(100% / 3);
}

Change width: calc(100% / 3); if you want to change amount of items in a row (e.g. 3 is current item count). Add flex-grow: 1; to make items expand to borders (only if a row has less items than it supposes to have).

Filling the Space in the Last Row with Flexbox, Create a style rule for the bottom navigation list displaying it as a flexbox row with no wrapping. For each list item within this ul element, set the font size to 2.2em. Using the selector nav#top ul li:nth-of-type(1) for the first list item, create a to have a maximum width of 80 pixels but to shrink at the same rate as the width if  The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).


Things I've Learned About CSS Grid Layout, The goal is to fill the space of this “grid” evenly. There are an .grid { display: flex​; flex-wrap: wrap; } .grid-item { flex-grow: 1; min-width: 25%; }. Flexbox: 4 items per row. Ask Question Asked 5 years, 2 months ago. Active 10 months ago. Viewed 353k times 260. 79. 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


flex-grow, Flexbox is for one dimensional layout (row or column). We could include the new desired grid-column-end value of 13 in the same media query but there's a far CSS grid allows you to use any size unit for your rows and columns. .grid { display: grid; grid-template-columns: repeat(3, auto); } .item { max-width: 300px; }. Then, the third element afert this is targeted to make the row finish (and display with a different border color to make this visible If the number of elements are within reason, it may be feasible writing css for each individual case using the quantity queries technique.


Controlling Ratios of Flex Items Along the Main Axis, It defines the ability for a flex item to grow if necessary. For example, if all items have flex-grow set to 1, every child will set to an equal size  flex-direction can have a value of row (default) or column, where a row runs horizontally (→) and a column runs vertically (↓). You can also reverse the direction of both by using row-reverse (←) and column-reverse (↑) respectively.