Flexalign-items:center只對一個元素有效

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.draggable-game-content {
    width: 100%;
    height: 40rem;
}

.draggable-game {
    position: relative;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    height: 38rem;
    text-align: center;
}

#menu-container {
    width: 4rem;
    height: 30rem;
    border: 1px solid #000;
    border-radius: 15px;
    position: relative;
}

.menu-list {
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.menu-item {
    display: block;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    border: 1px solid #000;
    height: 2.5rem;
    width: 2.5rem;
}

.menu-item:nth-child(2) {
    margin-bottom: 7rem;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div id="draggable-container">
        <div id="menu-container">
            <ul class="menu-list">
                <li class="menu-item"></li>
                <li class="menu-item"></li>
                <li class="menu-item"><a href="/draggable/gameinfo">info</a></li>
                <li class="menu-item"><a href="/draggable/gamesettings">settings</a></li>
                <li class="menu-item"><a href="/draggable/gameachievements">achievements</a></li>
            </ul>
        </div>
        <div class="draggable-game-content">
            <div class="draggable-game">test</div>
        </div>
    </div>
</div>

我有這個由 React 生成的頁面，我不明白為什么帶有“test”的 div 在左側選單關閉時保持顯示狀態。

我想讓它們保持在同一水平，就像這樣：

我以為我可以通過將 align-items 設定為居中（因此它們將垂直居中）并從同一點開始來實作這一點，但實際上它不起作用。

為什么我的方法無效，如何從頁面實作布局？

uj5u.com熱心網友回復：

你的 align-items 應該是 flex-start

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

uj5u.com熱心網友回復：

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start; // updated this line only
}

.draggable-game-content {
    width: 100%;
    height: 40rem;
}

.draggable-game {
    position: relative;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    height: 38rem;
    text-align: center;
}

#menu-container {
    width: 4rem;
    height: 30rem;
    border: 1px solid #000;
    border-radius: 15px;
    position: relative;
}

.menu-list {
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.menu-item {
    display: block;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    border: 1px solid #000;
    height: 2.5rem;
    width: 2.5rem;
}

.menu-item:nth-child(2) {
    margin-bottom: 7rem;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div id="draggable-container">
        <div id="menu-container">
            <ul class="menu-list">
                <li class="menu-item"></li>
                <li class="menu-item"></li>
                <li class="menu-item"><a href="/draggable/gameinfo">info</a></li>
                <li class="menu-item"><a href="/draggable/gamesettings">settings</a></li>
                <li class="menu-item"><a href="/draggable/gameachievements">achievements</a></li>
            </ul>
        </div>
        <div class="draggable-game-content">
            <div class="draggable-game">test</div>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

在 Flex 中對齊您的專案，您必須使用該align-items屬性。

你可以閱讀更多關于Flex和它的屬性此文章。

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

標籤：html css

上一篇：需要幫助指定要從移動設備視圖中隱藏的串列

下一篇：下圖需要CSS