フレックスディスプレイを使用してヘッダーのコンテンツを整列する

Question

フレックスディスプレイと本当に混乱しています。誰かが助けてくれることを願っています。私はこのサイトで私が一番左（セクション-A）、右の真ん中（セクション-b）は、いくつかのすべての方法では、いくつかの（上のいくつかのコンテンツを必要とするhttps://jsbin.com/vafexudini/edit?html,css

を再作成しようとしています

セクションc）。

section-aは正しい場所にあるようですが、途中で内容を正しく取得できません。

.container-1 { 
 
    display: flex; 
 
    max-width: 100%; 
 
    background-color: #F7F7F7; 
 
    height: 60px; 
 
    border-top: 1px solid #C1C1C1; 
 
    border-bottom: 2px solid #C1C1C1; 
 
} 
 

 

 
/*section-a*/ 
 

 
.section-a { 
 
    flex: 1; 
 
    position: relative; 
 
    top: 20px; 
 
} 
 

 
.section-a span.file { 
 
    margin-right: 15px; 
 
} 
 

 
#image { 
 
    float: left; 
 
    margin-right: 10px; 
 
    position: relative; 
 
    bottom: 7px; 
 
} 
 

 

 
/*section-b*/ 
 

 
.section-b { 
 
    flex: 2; 
 
    position: relative; 
 
    top: 20px; 
 
    justify-content: center; 
 
} 
 

 
.section-b span { 
 
    border: 2px solid #C1C1C1; 
 
    padding: 7px; 
 
    margin-right: -7px; 
 
    justify-content: center; 
 
} 
 

 
.left-edge { 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
} 
 

 
.right-edge { 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
.section-b span:hover { 
 
    cursor: pointer; 
 
    background-color: #E8F2FF; 
 
} 
 

 
.section-b span:active { 
 
    background-color: #E8F2FF; 
 
} 
 

 

 
/*section-c*/ 
 

 
.section-c { 
 
    flex: 1; 
 
    position: relative; 
 
    top: 20px; 
 
} 
 

 
.section-c span { 
 
    margin-right: 5px; 
 
} 
 

 
span.highlight { 
 
    background-color: yellow; 
 
    padding: 7px; 
 
}

<div class="container-1"> 
 
    <div class=section-a> 
 
    <div id="image"> 
 
     <image src="images/file-image.png" alt="file image"/> 
 
    </div> 
 
    <span class="file">File</span> 
 
    <span>Add Library</span> 
 
    </div> 
 

 
    <div class="section-b"> 
 
    <span class="left-edge htmlToggle">HTML</span> 
 
    <span class="cssToggle">CSS</span> 
 
    <span class="jsToggle">JavaScript</span> 
 
    <span class="consoleToggle">Console</span> 
 
    <span class="right-edge outputToggle">Output</span> 
 
    </div> 
 

 
    <div class="section-c"> 
 
    <span class="highlight">Login or Register</span> 
 
    <span>Blog</span> 
 
    <span>Help</span> 
 
    </div> 
 
</div>

Answer 1

あなたはAlsできるo flex & justify-contentsection-aおよび-cを使用してください。

flex-bでも使用できます。

flex-wrapもお手伝いできます。

align-itemsposition + topでもかまいません。

min-heightが& Cのためにheight（か他のコンテンツ/デザインに依存）

flex:1よりも安全かもしれないが、私の意見では良い選択でした。

例

.container-1 { 
 
    display: flex; 
 
    max-width: 100%; 
 
    background-color: #F7F7F7; 
 
    min-height: 60px; 
 
    border-top: 1px solid #C1C1C1; 
 
    border-bottom: 2px solid #C1C1C1; 
 
    align-items:center; 
 
} 
 

 

 

 

 
.section-a, .section-c { 
 
    flex: 1; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:flex-start; 
 
} 
 

 
.section-a span.file { 
 
    margin-right: 15px; 
 
} 
 

 
#image { 
 
    float: left; 
 
    margin-right: 10px; 
 
    position: relative; 
 
    bottom: 7px; 
 
} 
 

 

 
/*section-b*/ 
 

 
.section-b { 
 
    display:flex; 
 
    flex-wrap:nowrap; 
 
} 
 

 
.section-b span { 
 
    border: 2px solid #C1C1C1; 
 
    padding: 7px; 
 
} 
 

 
.left-edge { 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
} 
 

 
.right-edge { 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
.section-b span:hover { 
 
    cursor: pointer; 
 
    background-color: #E8F2FF; 
 
} 
 

 
.section-b span:active { 
 
    background-color: #E8F2FF; 
 
} 
 

 

 
/*section-c*/ 
 

 
.section-c { 
 
    justify-content:flex-end; 
 
} 
 

 
.section-c span { 
 
    margin-right: 5px; 
 
} 
 

 
span.highlight { 
 
    background-color: yellow; 
 
    padding: 7px; 
 
}

<div class="container-1"> 
 
    <div class=section-a> 
 
    <div id="image"> 
 
     <image src="images/file-image.png" alt="file image"/> 
 
    </div> 
 
    <span class="file">File</span> 
 
    <span>Add Library</span> 
 
    </div> 
 

 
    <div class="section-b"> 
 
    <span class="left-edge htmlToggle">HTML</span> 
 
    <span class="cssToggle">CSS</span> 
 
    <span class="jsToggle">JavaScript</span> 
 
    <span class="consoleToggle">Console</span> 
 
    <span class="right-edge outputToggle">Output</span> 
 
    </div> 
 

 
    <div class="section-c"> 
 
    <span class="highlight">Login or Register</span> 
 
    <span>Blog</span> 
 
    <span>Help</span> 
 
    </div> 
 
</div>

Answer 2

、コンテナにjustify-content: space-between;を追加子要素からすべてのflexのパラメータを削除して、そこに一つの負のマージンあなたが持っていることを削除します。

.container-1 { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    max-width: 100%; 
 
    background-color: #F7F7F7; 
 
    height: 60px; 
 
    border-top: 1px solid #C1C1C1; 
 
    border-bottom: 2px solid #C1C1C1; 
 
} 
 

 

 
/*section-a*/ 
 

 
.section-a { 
 
    position: relative; 
 
    top: 20px; 
 
} 
 

 
.section-a span.file { 
 
    margin-right: 15px; 
 
} 
 

 
#image { 
 
    float: left; 
 
    margin-right: 10px; 
 
    position: relative; 
 
    bottom: 7px; 
 
} 
 

 

 
/*section-b*/ 
 

 
.section-b { 
 
    position: relative; 
 
    top: 20px; 
 
    justify-content: center; 
 
} 
 

 
.section-b span { 
 
    border: 2px solid #C1C1C1; 
 
    padding: 7px; 
 
} 
 

 
.left-edge { 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
} 
 

 
.right-edge { 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
.section-b span:hover { 
 
    cursor: pointer; 
 
    background-color: #E8F2FF; 
 
} 
 

 
.section-b span:active { 
 
    background-color: #E8F2FF; 
 
} 
 

 

 
/*section-c*/ 
 

 
.section-c { 
 
    position: relative; 
 
    top: 20px; 
 
} 
 

 
.section-c span { 
 
    margin-right: 5px; 
 
} 
 

 
span.highlight { 
 
    background-color: yellow; 
 
    padding: 7px; 
 
}

<div class="container-1"> 
 
    <div class=section-a> 
 
    <div id="image"> 
 
     <image src="images/file-image.png" alt="file image"/> 
 
    </div> 
 
    <span class="file">File</span> 
 
    <span>Add Library</span> 
 
    </div> 
 

 
    <div class="section-b"> 
 
    <span class="left-edge htmlToggle">HTML</span> 
 
    <span class="cssToggle">CSS</span> 
 
    <span class="jsToggle">JavaScript</span> 
 
    <span class="consoleToggle">Console</span> 
 
    <span class="right-edge outputToggle">Output</span> 
 
    </div> 
 

 
    <div class="section-c"> 
 
    <span class="highlight">Login or Register</span> 
 
    <span>Blog</span> 
 
    <span>Help</span> 
 
    </div> 
 
</div>