資訊專(zhuān)欄INFORMATION COLUMN
啟動(dòng) flex-box：
父元素設(shè)置 display: flex; 或 display:inline-flex;
flex container： 父元素顯示設(shè)置 display: flex
flex item：flex container 中的子元素
flex 容器屬性：
flex-direction：控制 flex 元素沿著 main-axis 的排列方向
row：默認(rèn)值，flex 元素沿著 main-axis 從左到右排列
column：flex 元素將沿著 cross-axis 從上到下垂直排列
row-reverse：flex 元素沿著 main-axis 從右到左排列
column-reverse：flex 元素將沿著 cross-axis 從下到上垂直排列
flex-wrap： 指定 flex 元素單行顯示還是多行顯示
nowrap：默認(rèn)值，flex 元素在 flex 容器內(nèi)不換行排列
wrap：flex 元素 被打斷到多個(gè)行中。cross-start 會(huì)根據(jù) flex-direction 的值 相當(dāng)于 start 或 before。cross-end 為 cross-start 的相對(duì)值
wrap-reverse：和 wrap 的表現(xiàn)一樣但是 cross-start 和 cross-end 交替排列
flex-flow：是 flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)
justify-content：定義了瀏覽器如何分配順著父容器 main-axis 的 flex 元素之間及其周?chē)目臻g
flex-start：默認(rèn)值，flex 元素靠 main-axis 開(kāi)始邊緣（左對(duì)齊）
flex-end：所有 flex 元素靠 main-axis 結(jié)束邊緣（右對(duì)齊）
center：所有 flex 元素排在 main-axis中間（居中對(duì)齊）
space-between：除了第一個(gè)和最一個(gè) flex 元素的兩者間間距相同（兩端對(duì)齊）
space-around：讓每個(gè) flex 元素具有相同的空間
align-items：以與 justify-content 相同的方式在側(cè)軸方向上將當(dāng)前行上的 flex 元素對(duì)齊
stretch：默認(rèn)值，讓所有的 flex 元素高度和 flex 容器高度一樣
flex-start：讓所有 flex 元素靠 cross-axis 開(kāi)始邊緣（頂部對(duì)齊）
flex-end：讓所有 flex 元素靠 cross-axis 結(jié)束邊緣（底部對(duì)齊）
center：讓 flex 元素在 cross-axis 中間（居中對(duì)齊）
baseline：讓所有 flex 元素在 cross-axis 上沿著他們自己的基線對(duì)齊
align-content：定義彈性容器的側(cè)軸方向上有額外空間時(shí)，如何排布每一行，當(dāng)彈性容器只有一行時(shí)無(wú)作用
stretch：默認(rèn)值，拉伸 flex 元素，讓他們沿著 cross-axis 適應(yīng) flex 容器可用的空間
flex-start：讓多行 flex 元素靠 cross-axis開(kāi)始邊緣，沿著 cross-axis 從上到下排列，flex 元素在 flex 容器中頂部對(duì)齊
flex-end：讓多行 flex 元素靠著 cross-axis 結(jié)束位置，讓 flex 元素沿著Cross-Axis從下到上排列，即底部對(duì)齊
center：讓多行 flex 元素在cross-axis中間，在 flex 容器中居中對(duì)齊
flex 元素屬性：order：允許 flex 元素在一個(gè) flex 容器中重新排序 類(lèi)似 z-index
flex-grow：控制 flex 元素在容器有多余的空間如何放大（擴(kuò)展）
flex-shrink：控制 flex 元素在容器沒(méi)有額外空間又如何縮小
flex-basis：指定了 flex 元素在主軸方向上的初始大小
auto：默認(rèn)值，flex 元素寬度的計(jì)算是基于內(nèi)容的多少來(lái)自動(dòng)計(jì)算
取任何用于 width 屬性的任何值，比如 % || em || rem || px等
flex：flex-grow flex-shrink flex-basis 的速記
flex: 0 1 auto; 默認(rèn)行為
flex: 0 0 auto; 相當(dāng)于 flex: none; 它基本上是一個(gè)固定寬度的元素，其初始寬度是基于 flex 元素中內(nèi)容大小
flex: 1 1 auto; 相當(dāng)于 flex: auto; 自動(dòng)計(jì)算初始化寬度，但是如果有必要，會(huì)伸展或者收縮以適應(yīng)整個(gè)可用寬度
flex: "positive number" 將 flex 元素的初始寬度設(shè)置為零，伸展元素以填滿(mǎn)可用空間 并且最后只要有可能就收縮元素
align-self：整體對(duì)齊 flex 容器內(nèi)的所有彈性項(xiàng)目，改變一個(gè) flex 元素沿著側(cè)軸的位置，而不影響相鄰的 flex 元素
auto：默認(rèn)值，設(shè)置為父元素的 align-item 值，如果該元素沒(méi)有父元素的話(huà)，就設(shè)置為?stretch
flex-start：元素會(huì)對(duì)齊到?cross-axis?的首端
flex-end：元素會(huì)對(duì)齊到?cross-axis?的尾端
center：flex 元素會(huì)對(duì)齊到 cross-axis 的中間，如果該元素的 cross-size 的尺寸大于 flex 容器，將在兩個(gè)方向均等溢出
baseline：所有的 flex 元素會(huì)沿著基線對(duì)齊
stretch：將目標(biāo)元素拉伸，以沿著 cross-axis 填滿(mǎn) flex 容器的可用空間，flex 元素高度和 flex 容器高度一樣
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116528.html
摘要：二分查找英語(yǔ)，也稱(chēng)折半搜索英語(yǔ)對(duì)數(shù)搜索英語(yǔ)，是一種在有序數(shù)組中查找某一特定元素的搜索算法。這種搜索算法每一次比較都使搜索范圍縮小一半。代碼實(shí)現(xiàn)參考文章算法通關(guān)講 二分查找（英語(yǔ)：binary search），也稱(chēng)折半搜索（英語(yǔ)：half-interval search）對(duì)數(shù)搜索（英語(yǔ)：logarithmic search，是一種在有序數(shù)組中查找某一特定元素的搜索算法。搜索過(guò)程從數(shù)組的中...
摘要：常規(guī)寫(xiě)法速記法判斷變量是否存在速記法這可能會(huì)有些瑣碎，但是值得一提。常規(guī)寫(xiě)法速記法注意這兩個(gè)例子并不是完全相等，只要變量是一個(gè)真值，該表達(dá)式就是成立的。 19+ 個(gè) JavaScript 快速編程技巧 — SitePoint 這確實(shí)是一篇針對(duì)于基于 JavaScript 語(yǔ)言編程的開(kāi)發(fā)者必讀的文章。在過(guò)去幾年我學(xué)習(xí) JavaScript 的時(shí)候，我寫(xiě)下了這篇文章，并將其作為 JavaS...
摘要：常規(guī)寫(xiě)法速記法判斷變量是否存在速記法這可能會(huì)有些瑣碎，但是值得一提。常規(guī)寫(xiě)法速記法注意這兩個(gè)例子并不是完全相等，只要變量是一個(gè)真值，該表達(dá)式就是成立的。 19+ 個(gè) JavaScript 快速編程技巧 — SitePoint 這確實(shí)是一篇針對(duì)于基于 JavaScript 語(yǔ)言編程的開(kāi)發(fā)者必讀的文章。在過(guò)去幾年我學(xué)習(xí) JavaScript 的時(shí)候，我寫(xiě)下了這篇文章，并將其作為 JavaS...
閱讀 2313·2021-11-25 09:43
閱讀 2947·2019-08-30 15:52
閱讀 1900·2019-08-30 15:44
閱讀 986·2019-08-30 10:58
閱讀 766·2019-08-29 18:43
閱讀 3223·2019-08-29 18:36
閱讀 2324·2019-08-29 17:02
閱讀 1462·2019-08-29 17:01
