网格列使用弹性与固定尺寸边缘水槽

Is it possible to apply a fixed margin (e.g. 5px) to a cell in a flexbox layout, where the row space is evenly distributed among its columns?

是否有可能将固定的边缘(例如5px)应用于一个flexbox布局中的单元格，其中行空间在其列之间均匀分布?

Want I want to achieve:

我想要达到:

My current CSS will only align 3 columns in one row:

我目前的CSS将只在一行中对齐3列:

JSFiddle

JSFiddle

.row {
    display: flex;
    flex-flow: row wrap;
	box-shadow: 0 0 0 1px green;
}

.col {
    flex: 0 0 25%;
    text-align: center;
	box-shadow: 0 0 0 1px blue;
    background-color: steelblue;
	
	margin: 5px;
}

<div class="row">
    <div class="col">
		<div class="panel">1</div>
	</div>
    <div class="col">
		<div class="panel">2</div>
	</div>
    <div class="col">
		<div class="panel">3</div>
	</div>
    <div class="col">
		<div class="panel">4</div>
	</div>
	<div class="col"><div class="panel">5</div></div>
</div>

1 个解决方案

#1

You could use calc() for flex-basis length (in your case — it's in shorthand property flex), 10px because margin-left: 5px and margin-right: 5px:

您可以使用calc()表示弹性基长度(在您的例子中是flex属性)，10px因为margin-left: 5px和margin-right: 5px:

JSFiddle

JSFiddle

.row {
    display: flex;
    flex-flow: row wrap;
    box-shadow: 0 0 0 1px green;
}

.col {
    flex: 0 0 calc(25% - 10px);
    text-align: center;
    box-shadow: 0 0 0 1px blue;
    background-color: steelblue;
    margin: 5px;
}

<div class="row">
    <div class="col">
        <div class="panel">1</div>
    </div>
    <div class="col">
        <div class="panel">2</div>
    </div>
    <div class="col">
        <div class="panel">3</div>
    </div>
    <div class="col">
        <div class="panel">4</div>
    </div>
    <div class="col">
        <div class="panel">5</div>
    </div>
</div>