html指定盒子的宽度和高度,HTML – 我想flex盒子的宽度(水平)增长但不是高度(垂直)...

反正是否允许柔性物品在宽度上增长,但在必要时仅在高度上增长.我喜欢flexbox,但是即使没有内容填充它们然后在页面下方显示其他项目,连续的弹性项目都会增长到相同的高度会觉得很痛苦.理想情况下,当先前的项目没有足够的内容来填充框而不留下大空间时,我希望弹性项目将自己安排到可用空间中.

这是我缺乏知识还是不可能？如果不可能,可以在更新等中添加设施.

(抱歉.我试图上传图表来解释,但我的声誉还不够！)

[编辑.代码已添加为请求.一些样式留下来展示我想要被其他弹性项目占用的空白区域.]

.content {

font-size: 2em;

width: 100%;

margin: 0px;

padding: 0px;

background-color: coral;

display:flex;

flex-direction:row;

flex-wrap: wrap;

justify-content: center;

align-content: stretch;

align-items: flex-start;

}

.flex-item {

box-sizing: border-box;

flex-grow: 1;

flex-shrink: 0;

flex-basis:40vw;

background-color: rgba(255, 255, 255, 0.9);

border: 2px solid white;

border-radius: 2px;

margin: 2vmin;

padding: 2vmin;

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis nisi. Sed nec purus consectetur, sodales mi vel, efficitur arcu. Vivamus id congue quam. Fusce imperdiet bibendum egestas. Mauris porttitor risus id pharetra pharetra. Vivamus et lorem erat. Nullam ac nulla ex. Nulla sit amet semper ligula. Integer augue sem, pharetra in ex ut, finibus mollis neque. Integer vulputate dolor massa, a maximus sem vehicula malesuada. Morbi a nulla ornare, egestas nisl in, ultrices est. Integer ut maximus elit. Cras ac velit condimentum, dapibus dui quis, mattis ex.

Vivamus semper at tortor a lacinia. Nulla a suscipit felis. Aliquam erat volutpat. Integer dignissim suscipit nibh a accumsan.Fusce gravida nisl nec elit placerat porta. Ut feugiat feugiat lorem nec commodo. Morbi porttitor vel sapien id tincidunt. Vivamus venenatis pellentesque tempus.

显然我的问题不够明确！我将尝试扩展与网站约束,但不允许发布图表没有帮助.

Flex项目框包含文本,图像或两者.包含图像的Flex项目框缩放到可用空间.

对于高分辨率,仅文本框具有相同的宽度和高度(正方形),因此图像缩放正常(正方形)并且所有都是削片机.然而,在400 px宽的视口中,仅包含文本的框变长(例如200 x 1000px,为了参数),图像框为200 x 200px(正方形).然后在弹性项目文本的底部显示下一行,在图像下方留下一个很大的间隙(比如800px高).在收缩图像之后,其他柔性盒可以适合空间,但它们不会移动到间隙中.这个问题很明确吗？