首頁猿問為什么我的 Flexbox...

為什么我的 Flexbox 項目沒有彼此相鄰包裝？

JavaScript

倚天杖 2023-11-12 15:04:08

我有一個帶有以下 SCSS 的 Flexbox 容器：.picker { height: 75px; width: 100%; display: flex; flex-flow: column wrap;}我的彈性項目具有以下 SCSS：.pickeritem { height: 25px; width: 130px; flex-shrink: 0; display: flex; align-items: center; margin: 0 10px;}我遇到的問題是容器將項目包裝到 div 的中心，而不是緊挨著其他項目，如下所示：如何使項目 3 到 8 彼此相鄰換行，將所有空白保留在 div 右側？這可以在不使用任何行和列方法的情況下實現嗎？

查看完整描述

2 回答

SMILET

TA貢獻1796條經驗獲得超4個贊

嘗試使用align-content屬性。我還做了一些其他細微的更改，并添加了顏色和邊框以獲得更好的可視化效果。

.picker {

height: 75px;

width: 300px;

display: flex;

flex-direction: column;

flex-wrap: wrap;

align-content: flex-start;

border: 1px solid black;

}

.pickeritem {

height: 25px;

width: 50px;

flex-shrink: 0;

display: flex;

align-items: center;

margin: 0 10px;

background-color: #fbbdbd;

}

<div>

反對回復 2023-11-12

函數式編程

TA貢獻1807條經驗獲得超9個贊

您可以使用

.picker {

height: 75px;

width: 100%;

display: flex;

flex-direction: row;

justify-content:flex-start;

}

.pickeritem {

height: 25px;

flex-shrink: 0;

display: flex;

align-items: center;

margin: 0 10px;

}

反對回復 2023-11-12

2 回答
0 關注
183 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么我的 Flexbox 項目沒有彼此相鄰包裝？

為什么我的 Flexbox 項目沒有彼此相鄰包裝？

2 回答

添加回答

為什么我的 Flexbox 項目沒有彼此相鄰包裝？

為什么我的 Flexbox 項目沒有彼此相鄰包裝？