如何將元素與另一個與flex對齊的元素對齊？

-1

我有一個柔性容器內的兩個元素的行，這些元素使用CSS屬性-webkit-flex-flow: row wrap;和justify-content: space-around;居中。在這一行的上方，我想要一個與文本垂直對齊的行中最左邊的div。如何將元素與另一個與flex對齊的元素對齊？

是否有可能僅使用CSS來完成此操作，並且要求元素保留其display: flex;屬性？

這裏是我的html：

<div class="flex-container"> 
    <div class="info-box"> 

    </div> 
    <div class="type-one"> 

    </div> 
    <div class="type-one"> 

    </div> 
</div>

這裏是CSS：

.flex-container { 
    padding: 0; 
    margin: 0; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

.type-one{ 
    width: 45%; 
    height: 50px; 
    background: tomato; 

    text-align: left; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: flex-start; 
} 
.info-box{ 
    width: 100%; 
    height: 10px; 
    background: tomato; 
    margin-bottom: 3px; 
}

Here是小提琴的例子。你可以看到最上面的一行是如何從左邊開始的（因爲它有flex-start對齊方式），但是我希望它從第二行最左邊的元素開始的位置開始。這是可能的與給定的要求？

編輯：我意識到我可以在信息框中添加一個2.5％左右的空白或將其寬度設置爲95％，但我更喜歡一種與第一種元素相關的解決方案，這樣如果我改變寬度信息框會自動重新排列。

來源

2017-02-27 user3494047

這樣嗎？ https://jsfiddle.net/sqmcaqLv/3/ –

是的。我只是意識到我可以計算出剩餘空間的百分比，並用它來設置寬度或邊距。雖然我更喜歡一個沒有硬編碼的解決方案，因爲如果我改變第二行元素的寬度，那麼我需要手動更改信息框的邊距。有沒有相對於第二行而不是硬編碼邊距的東西？ – user3494047

您需要基於其他div的寬度（45％x2 + 5％的間距= 95％寬度）https://jsfiddle.net/sqmcaqLv/5/ – pol

要使它們在左邊對齊，請設置父元素的左/右邊距以匹配希望中間列開始的任何位置。將justify-content從space-around更改爲space-between，以便中間列的左側間距不會改變，並使用這些元素的寬度在它們之間創建空間。

.flex-container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    
 
    padding: 0; 
 
    margin: 0; 
 
    width: 95%; 
 
    margin: auto; 
 
} 
 

 
.type-one{ 
 
    height: 50px; 
 
    background: tomato; 
 
    text-align: left; 
 
    width: 47.5%; 
 
} 
 

 
.type-two{ 
 
    width: 100%; 
 
    margin-top: 10px; 
 
    font-size: 15px; 
 
    text-align: center; 
 
    height: 20px; 
 
    background: tomato; 
 
} 
 

 
.info-box{ 
 
    width: 100%; 
 
    height: 10px; 
 
    background: tomato; 
 
    margin-bottom: 3px; 
 
}

<div class="flex-container"> 
 
    <div class="info-box"></div> 
 
    <div class="type-one"></div><div class="type-one"></div> 
 
    <div class="type-two"></div> 
 
</div>

來源

2017-02-27 20:17:19

如何將元素與另一個與flex對齊的元素對齊？

回答

相關問題