我正在使用flexbox
来布置我的东西。我有5 lis
(到目前为止,但会改变),宽度如下:flex-basis:calc(100%/3)
。因此每行将有3 li's
。包装器(ul
)的width
为70%
。
到目前为止一切顺利。问题是,当我向li's
添加保证金时。当我向margin
添加li's
时,每行只会有2 li's
个额外空格,但我需要3个。
所以我找到了两个解决方案,给我带来了其他问题:
一种解决方案是将保证金添加到li's
,让我们说10px
。然后从每个20px
的{{1}}和width
中减去height
(10 * 2)。我不能这样做,因为我需要li's
为我设定的尺寸,而不是更小。
另一种解决方案是将li's
设置为justify-content
或space-around
。问题是我需要space-between
在列和行中(如图表)。如果我更改lis
,则justify-content
将不会出现在订单中。
有没有办法在不影响任何其他财产的情况下为li's
添加保证金?
(如果这是唯一的选择,我会向li
开放。)
以下是代码段:
JavaScript/JQuery
body, html {
height:100%; margin: 0; padding:0;
}
#flexWrapper {
display: flex;
justify-content: center;
height: 100%;
align-items: center;
overflow: auto;
}
#flexContainer {
width: 70%;
background-color:yellow;
list-style-type: none;
padding: 0;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content:flex-start;
}
li {
background-color: tomato; border: 1px solid black; height:50px;
box-sizing: border-box;
flex-basis:calc(100%/3);
margin:10px;
}
答案 0 :(得分:1)
好的,所以我终于得到了一个有效的答案!我必须给@Syahrul部分功劳以启动这个想法(在评论中)。
所以基本上我要做的就是这个。如果我们想要添加1.5%的保证金,我们会添加(1.5 * 2)* 3(1.5 * 2
,因为保证金位于每个li
的两边。* 3 because we have 3
我的in every row.) to the
宽度of the wrapper ('#flexContainer
),因此我们79%
的宽度为#flexContainer
。
接下来,我们将从3%
的{{1}}中减去width
(边距大小(1.5 * 2))。那是li
。
你有它!这是更新的JSFiddle
flex-basis:calc(100%/3 - 3%)

body, html {
height:100%; margin: 0; padding:0;
}
#flexWrapper {
display: flex;
justify-content: center;
height: 100%;
align-items: center;
overflow: auto;
}
#flexContainer {
width: 79%;
background-color:yellow;
list-style-type: none;
padding: 0;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content:flex-start;
}
li {
background-color: tomato; border: 1px solid black; height:100px;
box-sizing: border-box;
flex-basis:calc(100%/3 - 3%);
margin:1.5%;
}