[點(diǎn)晴永久免費(fèi)OA]前端知識CSS之flex布局
1.基本概念 flex布局是一種布局模型，經(jīng)常被稱之為flexbox，使用flex布局之后，他會給子元素提供強(qiáng)大空間分配和對齊能力。
在沒有使用flex布局之前，常用布局有：流式布局，浮動布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，還要注意父元素高度坍塌。
flex的優(yōu)點(diǎn)就是避免不靈活的布局形式，創(chuàng)建更多種布局模式供你選擇，解決了子元素的對齊和分布與 響應(yīng)式等問題。缺點(diǎn)是只能依靠自身的布局模式，稍有變化則無法改變。 2.flex的指定 （1）display屬性 給任意元素聲明display：flex或者聲明display：inline-flex（保持內(nèi)聯(lián)特性，用的很少）都會創(chuàng)建彈性布局。 如果你使用flex，那么你先要知道布局結(jié)構(gòu) 給外層元素定義flex，把外層元素當(dāng)“容器”元素，來控制其內(nèi)部的子項(xiàng)元素“項(xiàng)目”的排列方式
（2）注意事項(xiàng) 依靠容器元素的屬性，控制的是項(xiàng)目的排列方式，也就是說控制的不是自身，而是子元素 設(shè)置為flex布局以后，子元素的float，clear都失效了，換言之子元素不用浮動了，父元素也不用清除浮動了 設(shè)置了flex的元素，子元素會“塊狀化”。換言之，父元素使用了display：flex其子元素都會變成塊級元素。 3.主軸的排列方向 （1）行模式和列模式 行模式就是子元素（項(xiàng)目）在容器中以行（x軸）方向排列的模式 列模式就是子元素（項(xiàng)目）在容器中以列（y軸）方向
4.主軸排序 主軸方向可以取四個值，注意這四個值都要在容器中寫的 flex-direction: row; /* 默認(rèn)行模式下從左（開始）至右（結(jié)束） */ flex-direction: row-reverse; /* 行模式下從右（結(jié)束）至左（開始） */ flex-direction: column; /* 列模式下從上（開始）至下（結(jié)束） */ flex-direction: column-reverse; /* 列模式下從下（結(jié)束）至上（開始） */ 5.換行模式 flex-wrap 屬性來控制flex子項(xiàng)（項(xiàng)目）單行顯示換行和不換行，默認(rèn)情況不換行，即使容器無法承受所有項(xiàng)目，他們會按照等比例壓縮，強(qiáng)制在主軸方向顯示。 /* 默認(rèn)不換行 */ flex-wrap: nowrap; /* 換行 */ flex-wrap: wrap; 6.主軸上的對齊方向 justify-content 定義了項(xiàng)目在主軸方向上的對齊方式，需要注意的是，要區(qū)別行模式和列模式，當(dāng)然主要可以以行模式為例。 /*主軸對齊方式*/ /*默認(rèn)起點(diǎn)對齊*/ justify-content: flex-start; /*結(jié)束點(diǎn)對齊*/ justify-content: flex-end; /*居中對齊*/ justify-content: center; /*兩端對齊*/ justify-content: space-between; /*周圍分布相同空間*/ justify-content: space-around; /*均勻分布*/ justify-content: space-evenly;
7.交叉軸對齊方式 align-items指的是交叉軸的對齊方式，如果沒有指定交叉軸對齊方式默認(rèn)是 normal 項(xiàng)目無高度，默認(rèn)撐滿容器高度。 /*交叉軸對齊*/ /*起點(diǎn)對齊*/ align-items: flex-start; /*終點(diǎn)對齊*/ align-items: flex-end; /*居中對齊*/ align-items: center;
8.多軸線對齊 align-content屬性設(shè)置瀏覽器如何沿著彈性布局的橫縱項(xiàng)，多軸線分布的空間方式。 /* 多軸線對齊 */ /* 多軸線，交叉軸起點(diǎn) */ align-content: flex-start; /*多軸線，交叉軸結(jié)束 */ align-content: flex-end; /* 多軸線，居中 */ align-content: center; /* 多軸線，兩端對齊 */ align-content: space-between; /* 多軸線，周圍分布 */ align-content: space-around; /*多軸線，均分*/ align-content: space-around; 9.多軸線對齊 （1）項(xiàng)目的排序順序 order項(xiàng)目在布局時的順序，數(shù)值越小,，排列越靠前，默認(rèn)值為0，可以是負(fù)數(shù)，數(shù)值沒有單位。 （2）項(xiàng)目的增長規(guī)則：flex-grow規(guī)定了項(xiàng)目在flex容器中分配剩余空間的比例。負(fù)值無效，默認(rèn)值0，數(shù)值不需要單位。 flex給某項(xiàng)目，前提容器中主軸方向是有剩余空間的 項(xiàng)目本身是有自己的尺寸的，不放大時使用自身的長度尺寸。如：寬度設(shè)置了增長規(guī)則之后，原本尺寸失效了，使用增長規(guī)則的系數(shù) 剩余空間的比重分配，是所有項(xiàng)目的flex-grow系數(shù)相加，之后再按比例分配 flex-gorw：1; 分配比例 .item:nth-child(2){ /*放大規(guī)則，默認(rèn)值0*/ flex-grow: 1; /*1/6*/ } .item:nth-child(3){ /*放大規(guī)則，默認(rèn)值0*/ flex-grow: 5; /*5/6*/ } （3）項(xiàng)目的收縮規(guī)則 flex-shrink指定了flex項(xiàng)目的收縮規(guī)則，默認(rèn)值1，不允許負(fù)值，沒有任何單位 收縮前提，容器中無剩余空間，項(xiàng)目才會被壓縮 設(shè)置了收縮比例后，元遲勛會在壓縮時失效，而使用收縮系數(shù) 收縮數(shù)值越大，壓縮比例就越大 壓縮的分配比重，縮小的尺寸是所有項(xiàng)目縮小系數(shù)之和，再按比例分配 強(qiáng)制不縮小，flex-shrink：0； flex-shrink: 1; /*默認(rèn)值1*/ flex-shrink: 2;/*縮小系數(shù)*/ flex-shrink: 0;/*堅(jiān)決不縮小*/ （4）項(xiàng)目的初始化規(guī)則 flex-basis指定了flex項(xiàng)目元素在主軸方向上的初始化大小（尺寸），不允許負(fù)值，默認(rèn)auto，如果指定該屬性，則原本尺寸，將失效。 flex-basis:200px; （5）項(xiàng)目的flex簡寫❤ flex屬性指的是，增長規(guī)則，縮小規(guī)則，初始化尺寸的集合寫法。 默認(rèn)flex：0 1 auto； flex：1； 指增長規(guī)則系數(shù) flex：0 0 200px； 指新項(xiàng)目在容器中不放大，也不縮小，初始化尺寸200px 【總結(jié)】 用于容器的屬性 display：flex 指定flex布局 flex-direction 主軸的排序（主軸方向），默認(rèn)值row flex-warp：nowarp 項(xiàng)目在容器中是否換行顯示，常用之warp justify-content 主軸的對齊方式 align-items交叉軸的對齊方式（一般用于單軸線） align-content多軸線對齊方式 用于項(xiàng)目的屬性 order：0項(xiàng)目的排序 flex-grow：0放大規(guī)則，默認(rèn)0，不放大 flex-shrink：1 收縮規(guī)則，默認(rèn)1，縮?。?，不縮小。 flex-basis：200px 指定主軸長度尺寸，不允許負(fù)值，默認(rèn)值auto，優(yōu)先級比主軸的尺寸高 flex集合寫法，放大，縮小，初始尺寸，默認(rèn)0 1 auto。flex：1指放大，flex：0 0不放大不縮小 ———————————————— 版權(quán)聲明：本文為CSDN博主「Caleb-niu」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/weixin_48576413/article/details/124881408 該文章在 2023/5/16 10:39:02 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
