Html 为什么弹性物品没有包装?
我正在尝试制作多行具有相同高度的正方形(每行3个) 我已经为此编写了一些HTML和CSS,但是所有的框都在同一行上 以下是我目前掌握的情况:Html 为什么弹性物品没有包装?,html,css,flexbox,Html,Css,Flexbox,我正在尝试制作多行具有相同高度的正方形(每行3个) 我已经为此编写了一些HTML和CSS,但是所有的框都在同一行上 以下是我目前掌握的情况: #列表包装器{ 显示器:flex; 宽度:100%; } #列表包装器div{ 宽度:33.33%; } #列表包装器div img{ 弹性:1; } 如果您使用的是flexbox,并且希望对内容进行包装,则必须指定flex-wrap:wrap。默认情况下,弹性项不换行 这里的代码没有执行任何操作,因为#list wrapper div img的父级不是
#列表包装器{
显示器:flex;
宽度:100%;
}
#列表包装器div{
宽度:33.33%;
}
#列表包装器div img{
弹性:1;
}
如果您使用的是flexbox,并且希望对内容进行包装,则必须指定
flex-wrap:wrap
。默认情况下,弹性项不换行
这里的代码没有执行任何操作,因为#list wrapper div img
的父级不是display:flex
。您需要将其移动到#list wrapper div
:
#list-wrapper div img {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
要使图像具有三个交叉点,您应该指定flex-basis:33.33333%
将CSS更改为此,它将起作用:
#list-wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
flex-wrap: wrap;
}
#list-wrapper div {
flex: 0 0 33.333%;
}
JS Fiddle:flex容器的初始设置为 这意味着,当您创建flex容器时(通过将
display:flex
或display:inline flex
应用于元素),所有子元素(“flex项”)都被限制在一行中
要启用弹性项目包装,请使用flex-wrap:wrap
以下是flex属性如何工作的几个示例: 一个简单的flex容器,包含各种包含图像的flex项:
#列表包装器{
显示器:flex;
边框:1px纯黑;
}
#列表包装器div{}
#列表包装器div img{
高度:150像素;
宽度:150px;
}