Possible to use CSS Flexbox to stretch elements on every row while maintaining consistent widths? [duplicate]

问题

I'm trying to get a group of div's (with initial widths) to stretch across a container, expanding their widths when needed. This works great using display:flex, however if it wraps onto a new line, I don't want the items on the new line to stretch if there is any remaining space. I want the new line items to keep the same widths as the other elements in the container.

For example, in this code:

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

.container > div
{
	width:100px;
    height:100px;
    border:1px #fff solid;
    text-align:center;
    font-size:2em;
    background:#66f;

	flex-grow:1;
}

<!DOCTYPE html>
<html>
<body>

  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
  </div>

</body>
</html>

JSFiddle link, if required: https://jsfiddle.net/xodzL4b9/

If you resize the window, 5 will eventually wrap to the new line but grow to the entire row width. I want it to be on the new line but maintain the width that flex calculated for all of the elements on the first line.

Is that possible to do with Flex (or CSS in general) or will I need to use Javascript?

It's worth noting that I don't know how many elements will be on each line, so I cannot specify a percentage as the width. This is for a responsive layout where I don't want gaps on either side of the container.

EDIT:

Image for clarification

The "GAP = BAD" images are what I don't want. This is easily achieved with display:inline-block.
The top right image uses display:flex and is good, except for box 25 being stretched to 100% of the screen. I don't want this.
The bottom 2 images show exactly what I want. Regardless of resolution (and without using a lot of media queries to support every resolution), the boxes stretch to fill the gaps and are always the same width. No percentage widths are used since a small resolution would use different percentages to a large resolution.

回答1:

You can achieve this using CSS-grid:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.container>div {
  height: 100px;
  border: 1px #fff solid;
  text-align: center;
  font-size: 2em;
  background: #66f;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

回答2:

You can just set the width of the items with a %. Then remove the flex grow.

.container > div {
  width:25%;
  height:100px;
  outline:1px #fff solid;
  text-align:center;
  font-size:2em;
  background:#66f;
}

You will also need to change border to outline since border will push the elements 1px on each side. Change border to outline and it will create the 'border' inside the element.

Now if you want to fit let's say 10 elements in one row I would create a media query such as this to allow more elements per row.

@media screen and (min-width:768px) {
  .container > div{
    width:20%;
  }
}

来源：https://stackoverflow.com/questions/50283861/possible-to-use-css-flexbox-to-stretch-elements-on-every-row-while-maintaining-c

标签

html

css

flexbox