資訊專欄INFORMATION COLUMN
摘要：布局基礎(chǔ)知識文檔基礎(chǔ)知識概念一個有效的布局方式，即使不知道視窗的大小或者元素未知的情況下智能的，靈活的調(diào)整和分配元素和空間兩者之間的關(guān)系特性默認水平對齊默認不換行默認使所有子元素占滿一行，并自動調(diào)整子元素的大小改變默認寬度包含概念布局容器為
flex布局基礎(chǔ)知識文檔 基礎(chǔ)知識
概念 ： 一個有效的布局方式，即使不知道視窗的大小或者元素未知的情況下智能的，靈活的調(diào)整和分配元素和空間兩者之間的關(guān)系
特性
默認水平對齊
默認不換行
默認使所有子元素占滿一行，并自動調(diào)整子元素的大小(改變默認寬度)
包含概念：
flex布局容器(display為flex的父元素)
flex項目(flex布局容器中的子元素)
flexbox格式化上下文
主軸: Main-Axis軸
側(cè)軸: Cross-Axis軸
包含種類： flex inline-flex
flex 容器屬性： flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
對齊屬性
> `flex-direction` : row(主軸默認值) || column(側(cè)軸) || row-reverse(主軸翻轉(zhuǎn)) || column-reverse(側(cè)軸翻轉(zhuǎn))
換行屬性
flex-wrap : wrap(換行) || nowrap(不換行默認值) || wrap-reverse(反向換行)
縮寫
flex-flow: row wrap;
主軸布局屬性
justify-content: flex-start(左對齊默認值) || flex-end(右對齊) || center(居中對齊) || space-between(兩端對齊:平均分配中間距離) || space-around(讓每個flex項目具有相同的空間)
側(cè)軸布局屬性
align-item: flex-start(上對齊) || flex-end(下對齊) || center(居中) || stretch(拉伸默認值: 占滿整個高度) || baseline(基線對齊)
多行布局屬性
align-content: flex-start(多行上對齊) || flex-end(多行下對齊) || center(多行居中) || stretch(拉伸默認值: 多行占滿整個高度)
flex項目屬性: order || flex-grow || flex-shrink || flex-basis
order : 允許flex項目在flex容器中重新排序。
> 默認值為 0 > 可以接受正值以及負值 > flex項目根據(jù) `order` 重新排序 > 面對相同的值，由html文檔順序決定(與float相同)
flex-grow 與 flex-shrink: 允許設(shè)置flex項目在容器有多余的空間的時候如何放大，沒有空間的時候如何縮小
> 可接受 0 或者任意大于 0 的正數(shù) > `flex-grow`: 默認值為 0 `flex-shrink`: 默認值為 1 > 0 和 正數(shù) 分別表示填充的關(guān)和開 > `flex-grow`: 主軸 `flex-shrink`: 側(cè)軸
flex-basis: 指定項目的 初始計算 大小
> 默認值 auto， flex項目寬度基于內(nèi)容物自動計算 > 取值范圍為 width屬性的任意值 px || rem || em || % || vw || wh 等 > 如果flex-basis 屬性值為 0，也需要提供單位
連寫: flex: flex-grow flex-shrink flex-basis
> `flex: 0 1 auto //全為默認值` > 絕對 flex項目 `flex: 1 1` > 相對 flex項目 `flex-basis: 150px` > flex: none `flex: 0 0 auto` 計算與內(nèi)容物掛鉤 > flex: auto `flex: 1 1 auto` 初始計算與內(nèi)容物掛鉤，如有不要會自動縮放 > flex: "positive number" 正數(shù)可以代表任何正數(shù)(等價于 `flex: 正數(shù) 1 0`) > 多個 flex-grow 不同的值會按比例分配剩下的空間
algin-self: auto || flex-start || flex-end || center || baseline || stretch(用于控制當前flex項目側(cè)軸方向上的布局)
> auto 繼承自父元素, 默認值為 stretch(實際還是繼承自父元素的默認值)
絕對與相對flex項目
絕對 flex項目內(nèi)的間距只根據(jù)內(nèi)容大小計算 flex-basis: 0
> 基于 `flex-grow` 分配空間
相對 flex項目根據(jù)他的flex-grow屬性做計算 flex-basis: auto
> 通過內(nèi)容物決定初始大小
Auto-margin對齊
使用 margin: auto 導致左右兩方向會占據(jù)所有剩余空間
使用 margin: auto 會導致justify-content失效
切換 flex-direction
flex-direction: column 導致主軸與側(cè)軸切換，致使 justify-content 與 algin-item 作用方向發(fā)生改變
解決問題 (6類)
兼容性
[bug列表以及變通性] https://github.com/philipwalt...
某些瀏覽器允許收縮后會比原本尺寸小 flex: 0 0 90px;
* 解決方案: flex: 1 0 auto
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113492.html
摘要：通過加對應的調(diào)整布局。這些類實際是通過使用選擇器為當前元素增加了左側(cè)的邊距。簡單說兩種模式屬性為代表的框架自定義屬性為代表的框架我個人認為過多導致布局和樣式混在一起不好分辨，后期維護較困難，決定采用框架的設(shè)計模式。 showImg(https://segmentfault.com/img/bVEeOl?w=1200&h=500); 本文作為 Flex 布局進階，不對基礎(chǔ)做詳細介紹，關(guān)于...
摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會被擠到下一列圣杯布局和雙飛翼布局都會用到?？梢酝ㄟ^設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對布局，以及對應的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現(xiàn)方式（包括傳統(tǒng)的...
摘要：命名規(guī)范類型對象如。常量命名方式全部大寫。子容器在交叉軸的排列方向。交叉軸的起點對齊交叉軸的終點對齊交叉軸的中點對齊交叉軸的兩端對齊，軸線間隔平均分布軸線兩側(cè)間隔相等默認值，軸線占滿整個交叉軸。命名1.駝峰式命名法：(1) 大駝峰命名法：首字母大寫。(2) 小駝峰命名法：首字母小寫。2.文件資源命名：(1) 不得含有空格。(2) 建議只使用小寫字母，除了某些為說明文件的情況（如 README...
摘要：命名規(guī)范類型對象如。常量命名方式全部大寫。子容器在交叉軸的排列方向。交叉軸的起點對齊交叉軸的終點對齊交叉軸的中點對齊交叉軸的兩端對齊，軸線間隔平均分布軸線兩側(cè)間隔相等默認值，軸線占滿整個交叉軸。命名1.駝峰式命名法：(1) 大駝峰命名法：首字母大寫。(2) 小駝峰命名法：首字母小寫。2.文件資源命名：(1) 不得含有空格。(2) 建議只使用小寫字母，除了某些為說明文件的情況（如 README...
閱讀 1903·2021-11-22 15:25
閱讀 1263·2021-11-19 09:40
閱讀 1874·2021-09-27 13:57
閱讀 1006·2021-09-22 15:10
閱讀 982·2021-08-16 11:01
閱讀 2981·2021-07-23 17:51
閱讀 778·2019-08-30 15:55
閱讀 830·2019-08-30 13:58
