使用flexbox为li添加边距

时间:2015-10-25 21:23:50

标签: html css flexbox

我正在使用flexbox来布置我的东西。我有5 lis(到目前为止,但会改变),宽度如下:flex-basis:calc(100%/3)。因此每行将有3 li's。包装器(ul)的width70%

到目前为止一切顺利。问题是,当我向li's添加保证金时。当我向margin添加li's时,每行只会有2 li's个额外空格,但我需要3个。

所以我找到了两个解决方案,给我带来了其他问题:

  • 一种解决方案是将保证金添加到li's,让我们说10px。然后从每个20px的{​​{1}}和width中减去height(10 * 2)。我不能这样做,因为我需要li's为我设定的尺寸,而不是更小。

  • 另一种解决方案是将li's设置为justify-contentspace-around。问题是我需要space-between在列和行中(如图表)。如果我更改lis,则justify-content将不会出现在订单中。

有没有办法在不影响任何其他财产的情况下为li's添加保证金?

(如果这是唯一的选择,我会向li开放。)

JSFiddle

以下是代码段:

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;
}

1 个答案:

答案 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%;
}