flex-box的边距和等高列问题答案

【问题标题】：margin and equal height column problems with flex-boxflex-box的边距和等高列问题
【发布时间】：2014-04-13 11:51:06
【问题描述】：

我第一次尝试使用 css3 flex-box。我决定写一个小框架来玩。

要求非常简单——它必须尽可能小，定义盒子和网格的大小，而类只设置为父元素。所以我想出了这种方式

[class*="w-all"] {
display: flex;
flex-flow: row wrap;
}

.row {align-items: flex-start;}
.cols {display:flex; flex: 1 auto}

.w-25, .w-all-25>* {width:25%}
.w-33, .w-all-33>* {width:33.333333333%}
.w-38, .w-all-38>* {width:38.196601125%}
.w-62, .w-all-62>* {width:61.803398875%}

和 HTML 部分

<div class="wrap">
    <div class="row cols">
        <section class="w-62 w-all-33">
            <article>
                <h2>header</h2>
                <p>paragraph text</p>
            </article>
        </section>
        <aside class="w-38 w-all-25">
            <article>
                <h2>header</h2>
                <p>paragraph text</p>
            </article>
        </aside>
    </div>
</div>

在大多数情况下 - 它工作得很好。类设置为 cols 的元素的直接子元素是主列，在这些列中我们有网格。

这是一个关于 JSFiddle(http://jsfiddle.net/DGb7k/) 的实时示例

问题是：主列不等高（网格工作正常）

另外，如何将边距应用于网格上的元素？或者我应该问：我可以使它与此不同吗（非常感谢 px/em/rem 边距）

[class*="w-all"] {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

.w-all-25>* {width:22%}
.w-all-33>* {width:31.333333333%}

http://jsfiddle.net/jc5N6/

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您滥用了align-self 规则。我猜你正在寻找 strecth 值，而不是 flex-start: http://jsfiddle.net/DGb7k/1/

【讨论】：

当然，这更接近我正在寻找的内容，但不完全是因为它将列的内容拉伸到较高的高度。为了更好地可视化问题，我设置了另一个小提琴jsfiddle.net/DGb7k/2 目标是使“主列”等高，但让网格以 flex-start 方式工作

【解决方案2】：

别介意回答自己的问题有多愚蠢......

除我之外，修复非常简单

[class*="w-all"], .cols {display: flex;}
[class*="w-all"] {flex-flow: row wrap;}

这是一个现场例子的小提琴http://jsfiddle.net/DGb7k/3/

但是边距仍然是一个存在的问题

【讨论】：