我想水平居中對齊group1和右對齊group2與彈性。對齊中心和右彎曲？
<div class="holder">
<div class="group1">
...
</div>
<div class="group2">
...
</div>
</div>
CSS：
.holder{
display: flex;
justify-content:center;
}
.group2{
align-self: flex-end;
}
但一切都只是居中，有什麼解決？
這就是你可以只用Flexbox，就做最好的
.holder{
display: flex;
justify-content: center;
}
.group1 {
flex: 1;
text-align: center;
}
.group2{
margin-left: auto;
}<div class="holder">
<div class="group1">
Center
</div>
<div class="group2">
Right
</div>
</div>更好的選擇是使用相對/絕對位置Flexbox的
.holder{
display: flex;
justify-content: center;
color: white;
position: relative;
}
.group1 {
flex: 1;
text-align: center;
background: black;
}
.group2{
position: absolute;
top: 0;
right: 0;
}<div class="holder">
<div class="group1">
Center
</div>
<div class="group2">
Right
</div>
</div>注組別1實際上不居中。 –
是的，因爲'.group2'的寬度，但我認爲這是最接近你可以使用flexbox而不使用相對/絕對定位。 –
謝謝，我認爲這是您用flex獲得的壁櫥。 – panthro
您可以設置在.holder的高度，並與align-self和text-align播放：
CSS
.holder{
display: flex;
justify-content:center;
align-content: center;
height: 200px;
background: #ccc;
}
.group2{
align-self: center;
text-align: right;
width: 50%;
}
.group1{
align-self: center;
width: 50%;
text-align: center;
}
由於Flexbox的是建立在利潤存在的操縱除了使用以外，沒有辦法將其中一項移出流程。
的任何其他方法離開受其他元素的中心的項目。
.holder {
display: flex;
justify-content: center;
border: 1px solid grey;
position: relative;
}
.group1 {
background: plum;
}
.group2 {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border: 1px solid red;
}<div class="holder">
<div class="group1">
Group 1
</div>
<div class="group2">
Group 2
</div>
</div>
這是不可能的Flexbox的比任何其他的佈局......我以前的答案適用了。 –
「有什麼解決辦法？」這甚至是一個問題嗎？你可以至少要求不同的方式來做到這一點，因爲彈性盒不會工作。 –
對於一些對齊選項在這裏看到：[方法對齊的Flex項目（http://stackoverflow.com/a/33856609/3597276） –