在不影響其他彈性項目的情況下對齊彈性項目

Question

正如您在此處的演示中所看到的 ，我正在嘗試制作完整的高度/寬度布局，但是我在某些方面苦苦掙扎：

 @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); .clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } .painel { max-width: 100%; /* added */ height: 100vh; width: 100vw; font-family: 'Montserrat', sans-serif; } h1, h2, h3, h4, h5, h6, p, span, a { font-family: 'Montserrat', sans-serif; color: #333333; font-weight: normal; } .top-wrapper { background-color: #ffc55c; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .top-wrapper .menu-logo { padding-top: 10px; padding-right: 10px; padding-left: 10px; } .top-wrapper .menu-logo a { color: #e95d35; text-decoration: none; } .top-wrapper .menu-logo .logo { float: left; } .top-wrapper .menu-logo .menu { float: right; } .top-wrapper .slogan-content img { max-width: 100%; float: left; margin-right: 100px; } .top-wrapper .slogan-content .slogan { margin-left: 20px; float: left; font-size: 2.5em; } .top-wrapper .top-bottom { font-size: 2em; width: 500px; text-align: center; } .register { background-color: #FFFFFF; } 

 <div class="top-wrapper painel"> <div class="menu-logo clearfix"> <div class="logo"> <a href="#">logo</a> </div> <div class="menu"> <a href="#">teste</a> <a href="#">teste</a> </div> </div> <div class="slogan-content clearfix"> <img src="https://preview.c9users.io/playma256/projetoprivado/aqueleprojetoprivate/dist/imagens/doubt-face-2.png" /> <div class="slogan"> <p>lorem</p> <p>lorem</p> <p>lorem</p> <p>lorem</p> <p>lorem</p> </div> </div> <!-- slogan --> <div class="top-bottom"> <p>Agora tem o LOGOAQUI para você descobrir mais sobre os médicos</p> </div> <!-- slogan-botton --> </div> </div> <div class="register painel"> <h2>TESTE</h2> </div> 

首先，我正在使用flexbox嘗試垂直和水平對齊元素（並從中學習一點點）。 我想“消除” .menu-logo div上的.menu-logo影響，因此它的元素可以擴展到頁面的兩側，徽標在左側，其他（菜單）在右側。

有沒有辦法做到這一點？

Answer 1

您可以通過嵌套flex容器來實現布局。

換句話說，將display: flex添加到.menu-logo ，它將其子元素.logo和.menu轉換為flex項目。

然后justify-content: space-between .menu-logo添加justify-content: space-between .menu-logo justify-content: space-between ，這將兩個flex項目在容器的相對邊緣對齊。

修訂的Codepen

（請注意，必須禁用clearfix偽元素，Flex屬性才能正常工作。）

---

或者，您可以使用justify-content: space-around ，在flex項目和邊緣之間添加一些空間。

另一種選擇是完全跳過justify-content屬性，並在彈性項目上使用auto邊距。 例如： .logo { margin-right: auto; } .logo { margin-right: auto; } 。 這還將使兩個柔韌性項目在相對的邊緣對齊。

有關完整的說明和插圖，請參閱此文章： 對齊Flex項目的方法