第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

為什么我的 Flexbox 項(xiàng)目沒有彼此相鄰包裝？

為什么我的 Flexbox 項(xiàng)目沒有彼此相鄰包裝？

倚天杖 2023-11-12 15:04:08
我有一個(gè)帶有以下 SCSS 的 Flexbox 容器：.picker {  height: 75px;  width: 100%;  display: flex;  flex-flow: column wrap;}我的彈性項(xiàng)目具有以下 SCSS：.pickeritem {  height: 25px;  width: 130px;  flex-shrink: 0;  display: flex;  align-items: center;  margin: 0 10px;}我遇到的問(wèn)題是容器將項(xiàng)目包裝到 div 的中心，而不是緊挨著其他項(xiàng)目，如下所示：如何使項(xiàng)目 3 到 8 彼此相鄰換行，將所有空白保留在 div 右側(cè)？這可以在不使用任何行和列方法的情況下實(shí)現(xiàn)嗎？
查看完整描述

2 回答

?
SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

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


.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 class='picker'>

  <div class='pickeritem'>1</div>

  <div class='pickeritem'>2</div>

  <div class='pickeritem'>3</div>

  <div class='pickeritem'>4</div>

  <div class='pickeritem'>5</div>

  <div class='pickeritem'>6</div>

  <div class='pickeritem'>7</div>

  <div class='pickeritem'>8</div>

  <div class='pickeritem'>9</div>

<div>


查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊

您可以使用


.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;

}


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 2 回答
  • 0 關(guān)注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)