投稿のフォローアップ： "...なぜ"正当化項目 "と"正当な自己 "のプロパティはありませんか？

Question

の質問のフォローアップ：私は[上位の回答から]ボックス55 & 56を組み合わせることを支援するように誰かがとても親切だろうIn CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

を？

これは私が一日中それで苦労してきたと私はあきらめ

<div class="container"> 
 
    <div class="centered"> 
 
    55 
 
    </div> 
 
    <div class="bottomright"> 
 
    56 
 
    </div> 
 
</div>

探しているものです！助けを前にありがとう。

Answer 1

これを達成する方法は複数あります。具体的にはを絶対配置できますが、ここではそれに合わせて擬似を使用することにしました。この作業は、したがって親の中央にセンタリングされ、擬似の高さと一致していることである作るもの

。

スタックは

.container { 
 
    display: flex; 
 
    flex-direction: column;   /* flow vertically */ 
 
    justify-content: space-between; /* create a gap between items */ 
 
    height: 200px; 
 
    align-items: center; 
 
    background: yellow; 
 
} 
 

 
.container .centered { 
 
    width: 90%; 
 
    height: 80px; 
 
    background: lime; 
 
} 
 

 
.container .bottomright { 
 
    width: 20%; 
 
    background: lime; 
 
    align-self: flex-end;    /* align right */ 
 
} 
 

 
.container::before, 
 
.container .bottomright { 
 
    content: ''; 
 
    height: 40px; 
 
} 
 

 
/* extra styling, make text centered */ 
 
.container .centered, 
 
.container .bottomright { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <div class="centered"> 
 
    55 
 
    </div> 
 
    <div class="bottomright"> 
 
    56 
 
    </div> 
 
</div>

スニペット

---

あなたはcontainer

.container { 
 
    display: flex; 
 
    flex-direction: column;   /* flow vertically */ 
 
    align-items: center; 
 
    background: yellow; 
 
} 
 

 
.container .centered { 
 
    width: 90%; 
 
    height: 80px; 
 
    margin: 30px 0;     /* top/bottom margin */ 
 
    background: lime; 
 
} 
 

 
.container .bottomright { 
 
    width: 20%; 
 
    background: lime; 
 
    align-self: flex-end;    /* align right */ 
 
} 
 

 
.container::before, 
 
.container .bottomright { 
 
    content: ''; 
 
    height: 40px; 
 
} 
 

 
/* extra styling, make text centered */ 
 
.container .centered, 
 
.container .bottomright { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <div class="centered"> 
 
    55 
 
    </div> 
 
    <div class="bottomright"> 
 
    56 
 
    </div> 
 
</div>

上の高さを設定することを避けるために、同様のマージンでこれを達成することができます