我可以使用 flex 将 <divs> 定位到容器内的左侧和右侧吗？

Question

我有这个HTML:

    <div class="flexBreadcrumb">
        <div>Left</div>
        <div>Left</div>
        <div>Right</div>
    </div>

有没有一种使用 flex 的方法，我可以让前两个向左，第三个向右，给我这样的东西：

   Left Left                                                                  Right

这是我目前的CSS：

    .flexBreadcrumb {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-align-items: center;
        align-items: center;
        padding: 8px 15px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border-radius: 4px;
    }

Answer 1

可以，请看下面的代码

<div class="flexBreadcrumb">
        <div class='left'>Left</div>
        <div class='left'>Left</div>
        <div class='right'>Right</div>
    </div>

 .flexBreadcrumb {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-align-items: center;
        align-items: center;
        padding: 8px 15px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border-radius: 4px;
    }



.left {
   -webkit-align-self: flex-start;
   align-self: flex-start;
}

.right {
   margin-left: auto;
}

我添加了两个类 left 和 right, 现在 left 在这里做的是将自己与 flex 元素的开头对齐，还有一点时间，您需要将 margin-left 设置为 auto，对于右边的元素

工作fiddlehttp://jsfiddle.net/orz06w5c/1/

我可以使用 flex 将 <divs> 定位到容器内的左侧和右侧吗？

Can I use flex to position <divs> to the left and the right inside a container?

html

css

flexbox