flex布局如何左對(duì)齊并且間距相同

利用flex布局的時(shí)候,我們想讓元素左對(duì)齊(flex-start)同時(shí)又想滿足左右間距相同的效果(space-between)筹煮,到底如何實(shí)現(xiàn)沐旨?

情況

我們想要的效果:
期望效果

實(shí)際問題:
我們只能滿足一個(gè)排布需求奔滑,要么左對(duì)齊(右邊多出的部分會(huì)很空)荤堪,要么左右對(duì)齊(最后一排如果不排滿,布局會(huì)左右對(duì)齊)


居左對(duì)齊

左右對(duì)齊

代碼

具體怎么辦罢犹睢桅咆?二者只能滿足其一,得想辦法解決才行

.room-container{
    display: flex;
    width: auto;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: scroll;
  }
  .room-container:after {
      content: "";
      flex: auto;
   }

搞定坞笙!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末岩饼,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子薛夜,更是在濱河造成了極大的恐慌籍茧,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件梯澜,死亡現(xiàn)場(chǎng)離奇詭異寞冯,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)晚伙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門吮龄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人咆疗,你說我怎么就攤上這事漓帚。” “怎么了午磁?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵尝抖,是天一觀的道長(zhǎng)毡们。 經(jīng)常有香客問我,道長(zhǎng)牵署,這世上最難降的妖魔是什么漏隐? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮奴迅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挺据。我一直安慰自己取具,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布扁耐。 她就那樣靜靜地躺著暇检,像睡著了一般。 火紅的嫁衣襯著肌膚如雪婉称。 梳的紋絲不亂的頭發(fā)上块仆,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音王暗,去河邊找鬼悔据。 笑死,一個(gè)胖子當(dāng)著我的面吹牛俗壹,可吹牛的內(nèi)容都是我干的科汗。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼绷雏,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼头滔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起涎显,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤坤检,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后期吓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體早歇,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年膘婶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了缺前。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡悬襟,死狀恐怖衅码,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情脊岳,我是刑警寧澤逝段,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布垛玻,位于F島的核電站,受9級(jí)特大地震影響奶躯,放射性物質(zhì)發(fā)生泄漏帚桩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一嘹黔、第九天 我趴在偏房一處隱蔽的房頂上張望账嚎。 院中可真熱鬧,春花似錦儡蔓、人聲如沸郭蕉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽召锈。三九已至,卻和暖如春获询,著一層夾襖步出監(jiān)牢的瞬間涨岁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工吉嚣, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留梢薪,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓瓦戚,卻偏偏與公主長(zhǎng)得像沮尿,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子较解,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,426評(píng)論 0 26
  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,460評(píng)論 0 6
  • 2009年畜疾,W3C提出了一種新的方案--Flex布局,可以簡(jiǎn)便印衔、完整啡捶、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前已得到所有現(xiàn)在...
    獨(dú)行俠_ef93閱讀 2,796評(píng)論 0 51
  • 傳統(tǒng)的網(wǎng)頁布局基于盒裝模型奸焙,使用display瞎暑,position,float屬性來達(dá)成各種布局与帆。對(duì)于一些特殊的布局...
    exialym閱讀 2,627評(píng)論 0 11
  • 最近了赌,公司在做籌備期第一階段工作節(jié)點(diǎn)考核,3月31號(hào)之前玄糟,我有5個(gè)節(jié)點(diǎn)勿她,從13號(hào)入職到今天,一共8個(gè)工作日...
    熊小會(huì)閱讀 1,659評(píng)論 0 2