資訊專欄INFORMATION COLUMN
摘要：它的所有子元素稱為項目，簡稱項目。注意，設為布局以后，子元素的和屬性將失效。詳細主軸和交叉軸的理解請看分鐘徹底弄懂布局布局練習鏈接
響應式布局【flex】
來源于 響應式方法匯總
了解了以上響應式布局，下面重點介紹一下 flex彈性布局 ,非常有用,但是有記憶障礙的我，為了下次還能順利的記起來，還是總結一下吧，順便把我看的幾個博客內容和大家分享一下，寫的非常詳細，很好理解。
寫在前面--你需要知道的1. 查看css屬性兼容性情況https://caniuse.com/
2. 盒子模型 box-sizing
content-box(標準盒子模型)
width = content-width;解析：當盒子內容寬度固定時，設置盒子的padding和border，盒子模型寬高會變大，向外擴展，實際content內容不變(注意：margin始終在盒子外)；
border-box(IE盒子模型)
width = content-width + padding +border;
解析：當盒子內容寬度固定時，設置盒子的padding和border，盒子模型寬高不變，向內擴展，實際content內容變小(注意：margin始終在盒子外)；
3. 樣式兼容（postCss插件）flex彈性布局vscode 自動添加 css 兼容代碼插件
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱”容器”。它的所有子元素稱為 Flex 項目（flex item），簡稱”項目”。
注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
1. 彈性容器
display:flex;
2. 容器屬性
justify-content------------項目在主軸上的對齊方式( 水平或垂直由flex-direction決定 )
flex-start ( 默認 居左 )
flex-end ( 居右 )
center( 居中 )
space-between( 兩端對齊項目之間的間隔都相等 )
space-around( 每個項目兩側的間隔相等 )
align-items------------交叉軸上如何對齊( 水平或垂直由flex-direction決定 )
stretch( 默認 如果項目未設置高度或設為auto，將占滿整個容器的高度 )
flex-start ( 對齊起點 )
flex-end ( 對齊終點 )
center( 對齊中點 )
baseline( 項目的第一行文字的基線對齊 )
flex-direction------------決定主軸的方向
row( 默認 橫向排列 起點在左 )
row-reverse( 橫向排列 起點在右 )
column( 縱向排列 起點在頭【上】 )
row-reverse( 縱向排列 起點在尾【下】 )
flex-wrap------------子元素是否換行
nowrap( 默認 不換行 )
wrap( 換行 )
wrap-reverse( 反向換行 )
flex-flow------------
( flex-direction屬性和flex-wrap屬性的簡寫形式 ) 默認是 row nowrap
3. 項目屬性
order
order:/* default 0 */ JavaScript 語法：object.style.order="2"
規定項目順序
數值越小，排列越靠前
默認值為0
flex-grow
flex-grow:; /* default 0 */ JavaScript 語法：object.style.flexGrow="5"
規定項目的放大比例
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）.如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍.
默認值為0
flex-shrink
flex-shrink: number|initial|inherit; /* default 1 */JavaScript 語法：object.style.flexShrink="5"
定義了項目的縮小比例
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小.如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小.
默認值為1
flex-basis
flex-basis: number|auto|initial|inherit; /* default auto */JavaScript 語法：object.style.flexBasis="200px"
定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。
它可以設為跟width或height屬性一樣的值（ep:300px），則項目將占據固定空間.
默認值為auto
flex
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;/* default 0 1 auto */JavaScript 語法：object.style.flex="1"
默認值為0 1 auto
詳細主軸和交叉軸的理解請看：30分鐘徹底弄懂flex布局 布局練習鏈接
align-self
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;/* default auto */JavaScript 語法：object.style.alignSelf="center"
定義單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
默認值為auto,元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
codepan
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114522.html
摘要：今日繼續響應式網頁布局的實現，采用方案。有經驗的前端或多或少已經接觸過這個網站，因為它經常出現在搜索結果的前幾項。因此我想做一系列的影片專門介紹這些。 今日繼續W3Schools響應式網頁布局的實現，采用Flexbox方案。使用Flexbox實現響應式網頁布局是目前最流行的做法。如果你對Flexbox并不熟悉，可以查看W3Schools的教學： W3Schools Flexbox教學...
摘要：接下來做端一般都寫手機最大也就先隱藏手機菜單和按鈕優先級問題解決方法直接使用用谷歌開發者工具查看優先級里面的垂直居中再把寫成布局只要改成里面的子項目就變成一行了菜單導航導航導航導航導航到航導航導航導航導航方法切換元素的可見狀態。 CSS5:移動端頁面(響應式) 如果手機端和PC端頁面差別很大,就不要寫響應式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關于判斷是手機端你...
摘要：屬性定義了多根軸線的對齊方式。負值對該屬性無效。屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。 本文主要記錄一些自己遇見的flex布局案例 簡單回顧一下flex常用屬性 6個常用的容器屬性 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。 f...
閱讀 2384·2023-04-26 02:54
閱讀 2306·2021-10-14 09:43
閱讀 3341·2021-09-22 15:19
閱讀 2837·2019-08-30 15:44
閱讀 2697·2019-08-30 12:54
閱讀 980·2019-08-29 18:43
閱讀 1932·2019-08-29 17:12
閱讀 1325·2019-08-29 16:40
