資訊專欄INFORMATION COLUMN
摘要：今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局如果把一個元素設(shè)置為，它的所有子元素都成為容器成員，稱之為項目，并且，子元素的和屬性都會失效。以下介紹彈性布局設(shè)置在容器上的種屬性。與交叉軸兩端對齊，軸線之間的間隔平均分布。
今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局
如果把一個元素設(shè)置為display:flex，它的所有子元素都成為容器成員，稱之為項目，并且，子元素的float,clear和vertical-align屬性都會失效。以下介紹彈性布局設(shè)置在容器上的6種屬性。
flex-direction
flex-wrap
flex-flow
justify-content
align-content
align-items
1.flex-direction 決定主軸（容器默認(rèn)存在兩根軸：水平的主軸和垂直的交叉軸，項目默認(rèn)沿主軸排列）的方向
Document
效果圖如下：
代碼中將flex-direction設(shè)為row,即主軸在水平方向，也是flex-direction的默認(rèn)值，flex-direction可以設(shè)置4個值，其他三個值與其對應(yīng)的效果圖如下：
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
2.flex-wrap 定義項目在一條軸線排不下時決定它怎么換行，代碼就不放出來了，就是直接在上面代碼的.flex-flow{}中添加flex-wrap屬性，它有3個取值
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 定義項目在交叉軸上如何對齊，還是要放一小段代碼
這段代碼就是在第一段代碼的基礎(chǔ)上添加了6個項目，選中所有的與flex-item類同一輩并且是2的倍數(shù)的元素，將高設(shè)置為200px,并添加了align-items屬性，align-items:flex-start;交叉軸的起點對齊效果圖如下：
align-items: stretch;如果項目沒有設(shè)置高度，將會占滿整個容器的高度，也是該屬性的默認(rèn)值
align-items：flex-end;與交叉軸的終點對齊
align-items: center;與交叉軸的中點對齊
align-items: baseline;與項目中第一行文字的基線也就是底部對齊
5.align-content定義了多根軸線的對齊方式，如果項目只有一根軸線，該屬性不會起任何作用，這個屬性有6個取值，分別是：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一
倍。
stretch（默認(rèn)值）：軸線占滿整個交叉軸。
這里就不放圖了，看了上面的幾個這里應(yīng)該很容易理解，別問我為什么，因為懶
6.justify-content定義了項目在主軸上的對齊方式，該屬性有5個取值，分別是：
flex-start：左對齊，也是默認(rèn)值
flex-end：右對齊
center： 居中
space-between：兩邊對齊，項目之間的間隔相等。
space-around：每個項目兩側(cè)間隔相等。
不放效果圖，還是因為懶
這里只介紹了采用flex布局的容器的屬性，后續(xù)可能會有更多，也有可能沒有（微笑臉），哈哈哈，如有不足，請不吝指出，謝謝。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112746.html
摘要：今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局如果把一個元素設(shè)置為，它的所有子元素都成為容器成員，稱之為項目，并且，子元素的和屬性都會失效。以下介紹彈性布局設(shè)置在容器上的種屬性。與交叉軸兩端對齊，軸線之間的間隔平均分布。 今天剛剛學(xué)習(xí)了微信小程序，學(xué)習(xí)微信小程序之前首先得熟悉彈性布局showImg(https://segmentfault.com/img/bVYNPQ?...
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...
摘要：什么是呢答是的縮寫，意為彈性布局這個東西的引入，為盒模型提供了最大的靈活性可以相應(yīng)式的實現(xiàn)各種頁面的布局?；靖拍畈捎貌季值脑?，稱為容器，簡稱容器。在這個容器中默認(rèn)存在兩個軸水平方向的主軸和垂直方向上的交叉軸。 很多人不明白這個display:flex是到底是什么東西，如何使用的 。 1.什么是display：flex呢？ 答：flex是 flexible box的縮寫，意為彈性布局 ；...
閱讀 1342·2021-11-11 16:55
閱讀 1629·2021-10-08 10:16
閱讀 1271·2021-09-26 10:20
閱讀 3672·2021-09-01 10:47
閱讀 2521·2019-08-30 15:52
閱讀 2744·2019-08-30 13:18
閱讀 3263·2019-08-30 13:15
閱讀 1205·2019-08-30 10:55
