3.Flex布局

目標: 能夠使用Flex布局模型靈活、快速的開發(fā)網(wǎng)頁

  • Flex布局/彈性布局:
    • 是一種瀏覽器提倡的布局模型
    • 布局網(wǎng)頁更簡單、靈活
    • 避免浮動脫標的問題
    • 布局非常適合結(jié)構(gòu)化布局

目標:能夠使用Flex布局模型靈活、快速的開發(fā)網(wǎng)頁

設(shè)置方式

  • 父元素添加 display: flex，子元素可以自動的擠壓或拉伸
    組成部分
  • 彈性容器
  • 彈性盒子
  • 主軸

  • 側(cè)軸 / 交叉軸


    image.png

主軸對齊方式

使用justify-content調(diào)節(jié)元素在主軸的對齊方式,在Flex布局模型中，調(diào)節(jié)主軸或側(cè)軸的對齊方式來設(shè)置盒子之間的間距.


image.png
側(cè)軸對齊方式
image.png
伸縮比
image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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