我是 CSS 新手，現在我正試圖了解它是如何作業的。我從 CS50 課程開始，我正在嘗試制作該課程的專案 0，其中涉及重現 Google 搜索前端。早些時候，我已經完成了這個專案，但現在我決定再做一次，并基于 flex-boxes。我寫了一個簡短的代碼，稍后我想連接到 Google 搜索。搜索欄、按鈕 1 和按鈕 2 項是：搜索欄、google 搜索按鈕和“我感覺很幸運”按鈕。我現在嘗試將這些元素和按鈕居中以將線條移低，但我真的不明白該怎么做。我嘗試了 flex-wrap: wrap 和 flex-basis，但這會導致元素改變行，但它們之間的間距是頁面的一半，并且改變高度也沒有任何作用。
.searcher {
display: flex;
background-color: gray;
color: white;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
}
.searchbar {
margin: 1%;
}
.buttons {
margin: 1%;
}<div class="searcher">
<div class="searchbar">
<p>searchbar</p>
</div>
<div class="buttons">
<p>button1</p>
</div>
<div class="buttons">
<p>button2</p>
</div>
</div>uj5u.com熱心網友回復：
如果更改一點 HTML 代碼是一個選項，我有一個解決方案。
將兩個按鈕都放入一個 div 并將它們用作一個元素會使事情變得容易得多，并且讓您可以根據需要在內部重新組織它們。
.searcher {
display: flex;
background-color: gray;
color: white;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
flex-direction: column;
}
.searchbar {
margin: 1%;
}
.buttons {
display: flex;
flex-direction: row;
}
.button {
margin: 1%;
}<div class="searcher">
<div class="searchbar">
<p>searchbar</p>
</div>
<div class="buttons">
<div class="button">
<p>button1</p>
</div>
<div class="button">
<p>button2</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
似乎您想要沿著垂直軸放置另一層 flex 布局，您的布局的行將被放置。包含按鈕的第二行將被布局為沿水平軸的彈性框。
以您的標記為基礎（出于演示目的右對齊按鈕）：
<html>
<head>
<style>
.searcher {
display: flex;
flex-direction: column;
background-color: gray;
color: white;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
height: 100%;
}
.searchbar {
margin: 1%;
text-align: center;
}
.nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: right;
}
.buttons {
margin: 1%;
}
</style>
</head>
<body>
<div class="searcher">
<div class="searchbar">
<p>searchbar</p>
</div>
<div class="nav">
<div class="buttons">
<p>button1</p>
</div>
<div class="buttons">
<p>button2</p>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/462403.html
上一篇：Flexbox顯示為列，而不是行