使用柔性顯示器對齊標題中的內容

Question

我真的與柔性顯示器混淆，我希望有人可以提供幫助。

我試圖重新本站https://jsbin.com/vafexudini/edit?html,css

我需要在左邊（部分-A），有的在中間（第-B）和一些一路右側（一路一些內容部-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

o使用flex & justify-content爲section-a和-c。

flex也可以用於-b。

flex-wrap也可以在這裏幫助。

align-items改爲position + top也可能是有用的。

一個min-height可能是較安全height（或不依賴其他的內容/設計）

flex:1爲& C爲在我看來一個不錯的選擇。

例如

.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>

你可以Als