用于包装列的Flex-Basis
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用于包装列的Flex-Basis相关的知识，希望对你有一定的参考价值。
我在flex中有一个非常基本的网格设置，但最近我遇到了一个疏忽。
我的列具有边距权限：3em和flex-basis：calc（33％ - 3em）。
我的问题是这些中的第4个和第5个没有对齐，直到有一个完整的“行”3。
有关为什么会发生这种情况的任何见解？我想我可能会像往常一样过于复杂化。
section {
width: 1170px;
margin: 0 auto;
padding: 4em;
background-color: lightgray;
}
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.column {
flex: 1;
flex-direction: column;
margin-right: 3em;
}
.column:last-child {
margin-right: 0;
}
.three {
max-width: 33%;
flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
margin-right: 0;
}
.debug {
margin-bottom: 3em;
background-color: #ebf5fb;
height: 3em;
border: 1px dashed red;
text-align: center;
}<section>
<div class="flex wrap">
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
</div>
</section>答案
因为你使用flex: 1，它将使元素占用所有可用空间，在flex-basis被收回后剩下的东西。
什么阻止填充整行的最后两个项目是max-width，因为它的值比flex-basis宽，它们将扩展到它。
要么从flex: 1中删除column，要么使用与max-width相同的flex-basis计算值
堆栈代码段
section {
width: 1170px;
margin: 0 auto;
padding: 4em;
background-color: lightgray;
}
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.column {
flex: 1;
flex-direction: column;
margin-right: 3em;
}
.column:last-child {
margin-right: 0;
}
.three {
max-width: calc(33% - 3em); /* changed */
flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
margin-right: 0;
}
.debug {
margin-bottom: 3em;
background-color: #ebf5fb;
height: 3em;
border: 1px dashed red;
text-align: center;
}<section>
<div class="flex wrap">
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
<div class="column three debug">3 Columns</div>
</div>
</section>另一答案
谢谢LGson指出我正确的方向。
我的数学不正确。
我需要100％ - 行中的总利润。
而不是flex-basis：calc（33％ - 3em）;它需要是flex-basis：calc（（100％ - 6em）/ 3）;
更新了代码段
*,
::before,
::after {
background-repeat: no-repeat; /* 1 */
box-sizing: inherit; /* 2 */
}
html {
box-sizing: border-box; /* 1 */
cursor: default; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
section {
width: 1170px;
margin: 0 auto;
padding: 4em;
background-color: lightgray;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 3em;
/*overflow: hidden;*/
}
.column:last-child {
margin-right: 0;
}
.three {
max-width: calc( (100% - 6em) / 3);
-ms-flex-preferred-size: calc( (100% - 6em) / 3);
flex-basis: calc( (100% - 6em) / 3);
}
.three:nth-child(3n) {
margin-right: 0;
}
.debug {
background-color: #EBF5FB;
margin-top: 1em;
padding: .75em;
text-align: center;
border: 1px dashed #E8DAEF;
}<section>
<h2>Layout for 2 Dimensions</h2>
<h3>Specific Widths (or not)</h3>
<div class="flex wrap">
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
<div class="column three debug">1/3 Columns</div>
</div>
</section>以上是关于用于包装列的Flex-Basis的主要内容，如果未能解决你的问题，请参考以下文章
用于 maria-db 动态列的 Laravel 雄辩包装器