フレックスボックスを使用してアイテムをアライメントする

Question

フレックスボックスを使用してアイテムをタイムラインバーにアライメントしようとしています。私は、最初の円の始点を線の始めに、最後の円を中心に中央の項目を持つ線の終わりにすることができるようにしたい。これはflexboxを使って可能ですか？今私はあなたのフレキシボックス（：Pフレキシボックスが命である）であることを行うことができます確かに

ul { 
    display: flex; 
} 
li { 
    align-items: center; 
} 

Answer 1

を使用しています。

ただ、ULはCSSを必要とします：

ul { 
    display: flex; 
    justify-content: space-between 
} 

あなたはこの素晴らしい記事をチェックする必要があります - A Complete Guide to Flexbox

Answer 2

align-itemsは親要素に適用され、あなたのフレックスボックスのクロス軸上の位置合わせを制御します。あなたのケースでは、justify-content: space-between;は、再び、そのように親要素に適用する必要があります。

ul { 
    display: flex; 
    justify-content: space-between; 
} 

あなたはそれについての詳細を学ぶために非常に詳細なフレキシボックスの内訳on CSS Tricksをチェックアウトすることができます。

Answer 3

各項目にプロパティalign-selfを使用することができます。親要素で使用する際の問題は、子項目が親の言う通りに並べられることです。したがって、最初の項目の場合はalign-self:flex-start、2番目の項目の場合はalign-self:center、最後の項目の場合はalign-self:flex-end（リスト項目）です。

フレックスについて

お役立ちガイド：http://jonibologna.com/flexbox-cheatsheet/

Answer 4

使用フレキシボックスと絶対位置の要素は、これを達成することができます：

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
ul:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    top: 20px; 
 
    border-top: 1px solid #aaa; 
 
} 
 

 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    flex: 1 0 0; 
 
    margin-top: 40px; 
 
    position: relative; 
 
} 
 

 
li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 50%; 
 
    transform: translate(-50%, -150%); 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 2px solid yellow; 
 
    border-radius: 100%; 
 
    background-color: #fff; 
 
} 
 

 
li.selected:before { 
 
    background-color: yellow; 
 
}

<ul> 
 
    <li class="selected">Create account</li> 
 
    <li>Understand your role</li> 
 
    <li>Share stories</li> 
 
</ul>