Question

我知道在使用display: flex时你可以对孩子使用margin-left: auto并将其一直向右推，但如果你对多个孩子这样做，你最终会得到均匀分布的边距而不是他们都坐在最左边。

假设HTML无法使用

我知道你可以像这样创建一个类：http://jsfiddle.net/L943ckr5/

.flex {
    display: flex;
}

.child {
    height: 30px;
    width: 50px;
    
    background-color: red;
}

.child:nth-child(even) {
    background-color: blue;
}

.end {
    margin-left: auto;
}

<div class="flex">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child end"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

但是有没有办法单独瞄准最后3个孩子，然后“漂浮”他们，但显然有Flex。类似justify-self: flex-end;

的内容

Answer 1

如果您使用jQuery来解决此问题，我可以解决方案将每个3个孩子divs组包装成父div，并且将它们作为一个列传播。
如果您不知道child中divs markup的确切数量，这可能会有所帮助。

JSFiddle

HTML：

<div class="flex">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS：

.flex {
    display: flex;
    justify-content:space-between;
}
.flex-container {
    display:flex;
}
.child {
    height: 30px;
    width: 50px;
    background-color: red;
}
.child:nth-child(even) {
    background-color: blue;
}

jQuery：

var arr = $(".child"),
    templ = '<div class="flex-container"></div>';

for(var i = 0; i < arr.length; i+=3) {
  arr.slice(i, i+3).wrapAll(templ);
}

Answer 2

你的意思是这样的：

.child:nth-last-child(3) {
margin-left: auto;
}

＆＃13;

.flex {
    display: flex;
}

.child {
    height: 30px;
    width: 50px;    
    background-color: red;
}

.child:nth-child(even) {
    background-color: blue;
}

.child:nth-last-child(3) {
margin-left: auto;
}

＆＃13;

<div class="flex">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

＆＃13;

据我所知，没有任何属性可以添加到每个元素中，以达到相同的效果。

左右分割多个弹性儿童

2 个答案: