使用Flex-盒模型，我不能對準柔性項左右

我有HTML像我下面提到...使用Flex-盒模型，我不能對準柔性項左右

<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; 
    }

任何人都可以幫我嗎？

來源

2015-06-04 Ramesh Raja

爲什麼它不工作
隨着align-self屬性，你只能爲重寫align-items物業項目的個人定位。對齊不會影響輸出的順序。

簡而言之：該屬性不會更改輸出（div容器，項目）的順序。

解決方案
要使用比給定一個（源），另一個爲了您可以使用order屬性。

鏈接
見這個例子：http://jsfiddle.net/6ytv43pn/1/
參考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2015-06-04 07:44:26

謝謝穆勒。但正如我所提到的，我必須在右上角顯示'right-div'和'second-right-div'，這等於'float：right'。但是因爲我們使用'flex'容器'float：right' wont'work。 –

在我的示例中，您可以看到如何使用「訂單」屬性進行此操作。只要看到鏈接http://jsfiddle.net/6ytv43pn/1/ –

我找到了解決辦法，但還不夠公平的我:(

鏈接：http://jsfiddle.net/z1g13fwo/

這裏的問題是，當我們調整瀏覽器左大多數div（left-div和second-left-div）越來越重寫。但我做不想讓它覆蓋。

我想到這裏，當我們調整瀏覽器，如果我沒有足夠的空間來顯示（兩者）左div的（left-div和second-left-div），那麼我需要顯示ellipsis爲second-left-div和（上進一步調整大小）如果我沒有left-div的空間，那麼我需要爲left-div顯示ellipsis。

任何人都請幫我解決這個問題！

謝謝， Ramesh

來源

2015-06-04 17:28:09

我現在明白你想達到什麼 - 我誤解你的初衷。您可以通過媒體查詢來做到這一點。 –

使用Flex-盒模型，我不能對準柔性項左右

回答

相關問題