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