使用柔性显示器对齐标题中的内容

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