flex伸縮布局

主軸：默認(rèn)水平方向
側(cè)軸：默認(rèn)豎直方向
方向：主軸默認(rèn)從左到右，側(cè)軸默認(rèn)從上到下
主軸側(cè)軸可以通過flex-direction互換

使用

1 設(shè)置父盒子寬高，將父盒子設(shè)置為伸縮盒子 display:flex
2 明確主軸的方向 flex-direction 默認(rèn)是row 縱向是column
3 設(shè)置父盒子屬性調(diào)整子元素的布局
4 設(shè)置子盒子的寬高或者比例，如：均分，在子盒子中設(shè)置 flex:1 （每項(xiàng)占一分）

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

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

  • 一、Flex 布局是什么？ Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最...
    吉他手_c156閱讀 929評論 0贊 1
  • 主軸和側(cè)軸 注意：flex：將一個(gè)容器設(shè)置為塊伸縮容器inline-flex：將一個(gè)容器設(shè)置為內(nèi)聯(lián) 伸縮容器 注意...
    晚溪呀閱讀 1,257評論 0贊 1
  • CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box） Flexbox...
    翔阿翔阿翔閱讀 775評論 0贊 8
  • flex 布局方向 = 設(shè)定主軸為X軸或Y軸 項(xiàng)目排列方向=改變主軸正方向 舊版flex 容器 display :...
    fb941c99409d閱讀 474評論 0贊 0
  • 1、設(shè)置伸縮布局 2、設(shè)置固定寬度 flex-basis 3、彈性盒子實(shí)現(xiàn)多行排列 flex-wrap...
    苦咖啡Li閱讀 1,566評論 0贊 1

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