資訊專欄INFORMATION COLUMN
摘要：今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局如果把一個(gè)元素設(shè)置為，它的所有子元素都成為容器成員，稱之為項(xiàng)目，并且，子元素的和屬性都會(huì)失效。以下介紹彈性布局設(shè)置在容器上的種屬性。與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局
如果把一個(gè)元素設(shè)置為display:flex，它的所有子元素都成為容器成員，稱之為項(xiàng)目，并且，子元素的float,clear和vertical-align屬性都會(huì)失效。以下介紹彈性布局設(shè)置在容器上的6種屬性。
flex-direction
flex-wrap
flex-flow
justify-content
align-content
align-items
1.flex-direction 決定主軸（容器默認(rèn)存在兩根軸：水平的主軸和垂直的交叉軸，項(xiàng)目默認(rèn)沿主軸排列）的方向
Document
效果圖如下：
代碼中將flex-direction設(shè)為row,即主軸在水平方向，也是flex-direction的默認(rèn)值，flex-direction可以設(shè)置4個(gè)值，其他三個(gè)值與其對(duì)應(yīng)的效果圖如下：
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
2.flex-wrap 定義項(xiàng)目在一條軸線排不下時(shí)決定它怎么換行，代碼就不放出來了，就是直接在上面代碼的.flex-flow{}中添加flex-wrap屬性，它有3個(gè)取值
flex-wrap:nowrap; 不換行，也是默認(rèn)值 flex-wrap:wrap;換行，第一行在上面，排不下的繼續(xù)往下面排 flex-wrap:wrap-reverse; 換行，和wrap相反，第一行在下面，排不下的往上方排
是不是很簡單
3.flex-flow 是flex-direction flex-wrap的簡寫形式，默認(rèn)就是flex-flow:row nowrap,組合起來取值有12種情況；
4.align-items 定義項(xiàng)目在交叉軸上如何對(duì)齊，還是要放一小段代碼
這段代碼就是在第一段代碼的基礎(chǔ)上添加了6個(gè)項(xiàng)目，選中所有的與flex-item類同一輩并且是2的倍數(shù)的元素，將高設(shè)置為200px,并添加了align-items屬性，align-items:flex-start;交叉軸的起點(diǎn)對(duì)齊效果圖如下：
align-items: stretch;如果項(xiàng)目沒有設(shè)置高度，將會(huì)占滿整個(gè)容器的高度，也是該屬性的默認(rèn)值
align-items：flex-end;與交叉軸的終點(diǎn)對(duì)齊
align-items: center;與交叉軸的中點(diǎn)對(duì)齊
align-items: baseline;與項(xiàng)目中第一行文字的基線也就是底部對(duì)齊
5.align-content定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線，該屬性不會(huì)起任何作用，這個(gè)屬性有6個(gè)取值，分別是：
flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一
倍。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
這里就不放圖了，看了上面的幾個(gè)這里應(yīng)該很容易理解，別問我為什么，因?yàn)閼?br>
6.justify-content定義了項(xiàng)目在主軸上的對(duì)齊方式，該屬性有5個(gè)取值，分別是：
flex-start：左對(duì)齊，也是默認(rèn)值
flex-end：右對(duì)齊
center： 居中
space-between：兩邊對(duì)齊，項(xiàng)目之間的間隔相等。
space-around：每個(gè)項(xiàng)目兩側(cè)間隔相等。
不放效果圖，還是因?yàn)閼?br>
這里只介紹了采用flex布局的容器的屬性，后續(xù)可能會(huì)有更多，也有可能沒有（微笑臉），哈哈哈，如有不足，請(qǐng)不吝指出，謝謝。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112746.html
摘要：今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局如果把一個(gè)元素設(shè)置為，它的所有子元素都成為容器成員，稱之為項(xiàng)目，并且，子元素的和屬性都會(huì)失效。以下介紹彈性布局設(shè)置在容器上的種屬性。與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。 今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局showImg(https://segmentfault.com/img/bVYNPQ?...
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
摘要：什么是呢答是的縮寫，意為彈性布局這個(gè)東西的引入，為盒模型提供了最大的靈活性可以相應(yīng)式的實(shí)現(xiàn)各種頁面的布局?；靖拍畈捎貌季值脑?，稱為容器，簡稱容器。在這個(gè)容器中默認(rèn)存在兩個(gè)軸水平方向的主軸和垂直方向上的交叉軸。 很多人不明白這個(gè)display:flex是到底是什么東西，如何使用的 。 1.什么是display：flex呢？ 答：flex是 flexible box的縮寫，意為彈性布局 ；...
摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...
閱讀 1285·2021-11-11 16:55
閱讀 1548·2021-10-08 10:16
閱讀 1206·2021-09-26 10:20
閱讀 3587·2021-09-01 10:47
閱讀 2465·2019-08-30 15:52
閱讀 2693·2019-08-30 13:18
閱讀 3204·2019-08-30 13:15
閱讀 1141·2019-08-30 10:55
