彈性布局

彈性方法

display:flex;? ? ? ? ? ? ?設(shè)置彈性盒子

flex-wrap:wrap;? ? ? ? 自動(dòng)換行

justify-content:;? ? ? ? 設(shè)置彈性項(xiàng)目在主軸上的對(duì)齊方式

align-items:;? ? ? ? ? ? ?設(shè)置彈性項(xiàng)目在交叉軸上的對(duì)其方式

flex-direction:column-reverse;? ? ? ? ? ?改變主軸方向

彈性屬性

space-around? ? ? ? ?改變對(duì)齊方向

space-between? ? ? ?兩端對(duì)立(兩端頂頭排列)

center? ? ? ? ? ? ? ? ? ? ? 居中

space-evenly? ? ? ? ? 同樣外邊距排列(不分左右)

space-around? ? ? ? ?同樣左右外邊距排列

row-reverse? ? ? ? ? ? ?水平向右

colume? ? ? ? ? ? ? ? ? ? 豎直向下

column-reverse? ? ? ? 豎直向上

fiex-start? ? ? ? ? ? ? ? ? ?左對(duì)齊

fiex-end? ? ? ? ? ? ? ? ? ? ?右對(duì)齊

stretch? ? ? ? ? ? ? ? ? ? ? ?拉伸至最大高度(在該元素未設(shè)置高度時(shí)才能使用后)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一.什么是flex布局? 官方說(shuō)法:Flex是Flexible Box的縮寫,意為”彈性布局”,用來(lái)為盒狀模型提供...
    Jason杰森閱讀 790評(píng)論 0 1
  • 傳統(tǒng)的響應(yīng)式布局方式,通過position:absoulte和float 彈性布局: 可以看出僅少量的代碼就可以實(shí)...
    chen_cheng閱讀 714評(píng)論 0 2
  • 怪異盒模型 box-sizing box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。 con...
    溜溜球的嘛閱讀 465評(píng)論 0 0
  • 彈性布局 最近了解了彈性布局,發(fā)現(xiàn)這玩意真是太好用了,于是就記...
    Shy啊閱讀 553評(píng)論 0 1
  • 主軸和側(cè)軸 注意:flex:將一個(gè)容器設(shè)置為塊伸縮容器inline-flex:將一個(gè)容器設(shè)置為內(nèi)聯(lián) 伸縮容器 注意...
    晚溪呀閱讀 1,259評(píng)論 0 1

友情鏈接更多精彩內(nèi)容