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，现在剩下的就是将它自己与flex元素的开头对齐，并且有一点调整，你需要将margin-left设置为auto，对于右边的元素< / p>

工作小提琴http://jsfiddle.net/orz06w5c/1/

我可以使用flex将<divs>放置在容器内的左侧和右侧吗？</divs>

1 个答案: