CSS：フレックスボックス最初の子は左に、残りはセンター

Question

私はflexboxのCSSで遊んでいます。私は、ナビゲーションメニューを作成しようとしています。私は、メニューの最初の項目が最も左にあり、残りの項目が中央にあるようにしたい。現在、私は中心にすべてを持っています。コンセントにコンテンツを配置するには、justify-content: centerをコンテナに使用しています。

しかし、私はflex-boxに特定の項目を並べることはできません。私はfloatにしようとしましたが、floatはアライメントのためのものではなく、フレックスボックスの項目では動作しません。これを達成する方法/回避策はありますか？ありがとう。ここにはpenがあります。フレックス方向について

body{ 
    background: #e0f080; 
    color: white; 
    font-weight: bold; 
    font-size: 1em; 
} 
.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    background-color: tomato; 
    color: white; 
    font-weight: bold; 
    font-size: 1em; 
    justify-content: center; 
} 
.flex-item{ 
    align-content: space-around; 
    margin: 10px; 
    border: 2px solid white; 
    padding: 5px; 
} 
.menu{ 
    order: -1; 
    align-self: start; 
    font-size: 3em; 
} 

Answer 1

使用ポジショニングに行くことができますしたい場合は私に知らせて - flex-containerにposition: relativeを追加し、menuにこれを適用します。

を

position: absolute; 
top: 0; 
left: 0; 

また、あなたはそれをクリーンアップする（align-self: start）を使用していた - 下記のデモ：

body { 
 
    background: #e0f080; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 1em; 
 
} 
 
.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    background-color: tomato; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 1em; 
 
    justify-content: center; 
 
    position: relative; 
 
} 
 
.flex-item { 
 
    align-content: space-around; 
 
    margin: 10px; 
 
    border: 2px solid white; 
 
    padding: 5px; 
 
} 
 
.menu { 
 
    order: -1; 
 
    font-size: 3em; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="flex-container"> 
 
    <div class="menu"> 
 
    <span>&#8801;<span> 
 
    </div> 
 
     
 
<a class="flex-item">item 1</a> 
 
<a class="flex-item">item 2</a> 
 
<a class="flex-item">item 3</a> 
 
</div>

Answer 2

：左に子を整列させる自動：行（デフォルト）あなたは余裕右を設定する必要があります。

.container { 
 
    height: 100px; 
 
    border: solid 10px skyblue; 
 
    
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 
.block { 
 
    width: 50px; 
 
    background: tomato; 
 
} 
 
.justify-start { 
 
    margin-right: auto; 
 
}

<div class="container"> 
 
    <div class="block justify-start"></div> 
 
    <div class="block"></div> 
 
</div>

このコードを試してみて、uはuはまた、このリンクにhttps://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins