Question

我第一次尝试使用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/

Answer 1

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

Answer 2

不要在意回答你自己的问题是多么愚蠢......

我解释说，修复非常简单

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

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

然而，保证金仍然是实时问题

弹性框的边距和高度相同的列问题

2 个答案: