html - 使用 flex-box-model，我无法将 flex-item 左右对齐

Question

我有下面提到的 HTML...

<div class="parent-div">
  <div class="left-div">left side</div>
  <div class="second-left-div">left side</div>
  <div class="right-div">right side</div>
  <div class="second-right-div">right side</div>
</div>

...我想在最左边显示 left-div，在最右边显示 right-div。为此，我使用了 flex 盒子模型(下面我提到了 CSS)，但它对我不起作用。

   .parent-div {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
    }

    .left-div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;    
        min-width: 0;
        align-self: flex-start;
    }

    .second-left-div {
       align-self: flex-start;
    }

    .right-div, .second-right-div {
        align-self: flex-end;
    }

有人能帮帮我吗？

Answer 1

为什么不起作用
使用 align-self 属性，您只能为覆盖 align-items 属性的元素设置单独的对齐方式。对齐不会对输出的顺序产生影响。

简而言之:该属性不会改变输出的顺序(div 容器、元素)。

解决方案
要使用不同于给定顺序(在源代码中)的其他顺序，您可以使用 order 属性。

链接
请参阅此示例:http://jsfiddle.net/6ytv43pn/1/
引用:https://css-tricks.com/snippets/css/a-guide-to-flexbox/