问题描述
我正在尝试使一组div(具有初始宽度)在整个容器中拉伸，并在需要时扩展其宽度.使用display:flex可以很好地工作，但是如果将其包裹在新行上，则我不希望新行中的项目在有剩余空间的情况下进行拉伸.我希望新订单项的宽度与容器中其他元素的宽度相同.
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.
例如，在此代码中:
.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链接(如果需要): https://jsfiddle.net/xodzL4b9/
JSFiddle link, if required: https://jsfiddle.net/xodzL4b9/
如果您调整窗口的大小，则5最终将换行到新行，但会增加到整个行宽.我希望它在新行上，但保持为第一行上所有元素计算的flex的宽度.
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.
是否可能与Flex(或一般的CSS)有关?还是需要使用Javascript?
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.
-
"GAP = BAD"图像是我所不需要的.这很容易实现带有display:inline-block.
The "GAP = BAD" images are what I don't want. This is easily achievedwith display:inline-block.
右上图使用display:flex，效果很好，除了方框25被拉伸到屏幕的100％.我不要这个.
The top right image uses display:flex and is good, except for box 25being stretched to 100% of the screen. I don't want this.
底部2张图像恰好显示了我想要的内容.不管分辨率(并且无需使用大量媒体查询来支持每个分辨率)，则框会拉伸以填补空白，并且始终相同的宽度.由于分辨率低，因此不使用百分比宽度将使用不同的百分比来获得较大的分辨率.
The bottom 2 images show exactly what I want. Regardless ofresolution (and without using a lot of media queries to support everyresolution), the boxes stretch to fill the gaps and are always thesame width. No percentage widths are used since a small resolutionwould use different percentages to a large resolution.
推荐答案
您可以使用CSS网格来实现:
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>这篇关于可以使用CSS Flexbox在保持一致的宽度的同时在每一行上拉伸元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！