反正是否允许柔性物品在宽度上增长,但在必要时仅在高度上增长.我喜欢flexBox,但是即使没有内容填充它们然后在页面下方显示其他项目,连续的弹性项目都会增长到相同的高度会觉得很痛苦.理想情况下,当先前的项目没有足够的内容来填充框而不留下大空间时,我希望弹性项目将自己安排到可用空间中.
这是我缺乏知识还是不可能？如果不可能,可以在更新等中添加设施.
(抱歉.我试图上传图表来解释,但我的声誉还不够！)
[编辑.代码已添加为请求.一些样式留下来展示我想要被其他弹性项目占用的空白区域.]
<!doctype html>
<html>
<head>
<style>
.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,0.9);
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
}
</style>
</head>
<body>
<div class="content">
<div class="flex-item">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.
</div>
<div class="flex-item"><img src="https://pixabay.com/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">
</div>
<div class="flex-item">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.
</div>
<div class="flex-item"><img src="https://pixabay.com"/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%"> </div>
</div>
</body>
</html>
显然我的问题不够明确！我将尝试扩展与网站约束,但不允许发布图表没有帮助.
Flex项目框包含文本,图像或两者.包含图像的Flex项目框缩放到可用空间.
对于高分辨率,仅文本框具有相同的宽度和高度(正方形),因此图像缩放正常(正方形)并且所有都是削片机.然而,在400 px宽的视口中,仅包含文本的框变长(例如200 x 1000px,为了参数),图像框为200 x 200px(正方形).然后在弹性项目文本的底部显示下一行,在图像下方留下一个很大的间隙(比如800px高).在收缩图像之后,其他柔性盒可以适合空间,但它们不会移动到间隙中.这个问题很明确吗？
解决方法
您正在寻找的是’align-content’属性,默认设置为’stretch’并垂直对齐元素(横轴).
反对’justify-content’,默认’flex-start’,水平对齐元素(主轴).
‘align-self’,默认’auto’,可用于控制单个项目.
在其他情况下,给出max-height和height属性也可以使用相同的值.
使用哪个选项取决于您的个人要求.
背景信息非常好的资源：Codrops CSS Reference – Flexbox
@Sharon
我相信这是你的答案.基本上,解决方案中的所有内容都具有相对宽度和高度.因此你的内心也是如此.给你的’flex-item’提供最小和最大高度将防止高度调整大小.你需要做更多的东西,所以看看代码.
body {
overflow: hidden;
/* just for testing,remove */
}
.flex-content {
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
}
.flex-item {
flex: 1 1 40vw;
min-height: 50px;
max-height: 50px;
background-color: rgba(255,0.7);
text-align: center;
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
background-color: #fce4ec; /* for testing*/
}
<div class="flex-content"> <div class="flex-item">some text</div> <div class="flex-item">some text data</div> <div class="flex-item">some more text data</div> <div class="flex-item">again some more text data</div> <div class="flex-item">some text</div> <div class="flex-item">some text data</div> <div class="flex-item">some more text data</div> <div class="flex-item">again some more text data</div> <div class="flex-item">some text</div> <div class="flex-item">some text data</div> <div class="flex-item">some more text data</div> <div class="flex-item">again some more text data</div> </div>
