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