初步學習彈性布局

syoya 發布于2019-08-29 13:50 / 1919人閱讀

摘要：今天剛剛學習了微信小程序，學習微信小程序之前首先得熟悉彈性布局如果把一個元素設置為，它的所有子元素都成為容器成員，稱之為項目，并且，子元素的和屬性都會失效。以下介紹彈性布局設置在容器上的種屬性。與交叉軸兩端對齊，軸線之間的間隔平均分布。

今天剛剛學習了微信小程序，學習微信小程序之前首先得熟悉彈性布局

如果把一個元素設置為display:flex，它的所有子元素都成為容器成員，稱之為項目，并且，子元素的float,clear和vertical-align屬性都會失效。以下介紹彈性布局設置在容器上的6種屬性。

flex-direction

flex-wrap

flex-flow

justify-content

align-content

align-items

1.flex-direction 決定主軸（容器默認存在兩根軸：水平的主軸和垂直的交叉軸，項目默認沿主軸排列）的方向




Document

效果圖如下：

代碼中將flex-direction設為row,即主軸在水平方向，也是flex-direction的默認值，flex-direction可以設置4個值，其他三個值與其對應的效果圖如下：

  flex-direction:row-reverse;

  flex-direction:column;

  flex-direction:column-reverse;

2.flex-wrap 定義項目在一條軸線排不下時決定它怎么換行，代碼就不放出來了，就是直接在上面代碼的.flex-flow{}中添加flex-wrap屬性，它有3個取值

 flex-wrap:nowrap; 不換行，也是默認值
 
 flex-wrap:wrap;換行，第一行在上面，排不下的繼續往下面排
 
 flex-wrap:wrap-reverse; 換行，和wrap相反，第一行在下面，排不下的往上方排

是不是很簡單

3.flex-flow 是flex-direction flex-wrap的簡寫形式，默認就是flex-flow:row nowrap,組合起來取值有12種情況；

4.align-items 定義項目在交叉軸上如何對齊，還是要放一小段代碼

這段代碼就是在第一段代碼的基礎上添加了6個項目，選中所有的與flex-item類同一輩并且是2的倍數的元素，將高設置為200px,并添加了align-items屬性，align-items:flex-start;交叉軸的起點對齊效果圖如下：

align-items: stretch;如果項目沒有設置高度，將會占滿整個容器的高度，也是該屬性的默認值

align-items：flex-end;與交叉軸的終點對齊

align-items: center;與交叉軸的中點對齊

align-items: baseline;與項目中第一行文字的基線也就是底部對齊

5.align-content定義了多根軸線的對齊方式，如果項目只有一根軸線，該屬性不會起任何作用，這個屬性有6個取值，分別是：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一
倍。
stretch（默認值）：軸線占滿整個交叉軸。

這里就不放圖了，看了上面的幾個這里應該很容易理解，別問我為什么，因為懶

6.justify-content定義了項目在主軸上的對齊方式，該屬性有5個取值，分別是：
flex-start：左對齊，也是默認值
flex-end：右對齊
center：居中
space-between：兩邊對齊，項目之間的間隔相等。
space-around：每個項目兩側間隔相等。
不放效果圖，還是因為懶

這里只介紹了采用flex布局的容器的屬性，后續可能會有更多，也有可能沒有（微笑臉），哈哈哈，如有不足，請不吝指出，謝謝。

云服務器 GPU云服務器 hadoop初步學習計算機的初步學習學習css布局人工智能初步

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112746.html

初步學習彈性布局

摘要：今天剛剛學習了微信小程序，學習微信小程序之前首先得熟悉彈性布局如果把一個元素設置為，它的所有子元素都成為容器成員，稱之為項目，并且，子元素的和屬性都會失效。以下介紹彈性布局設置在容器上的種屬性。與交叉軸兩端對齊，軸線之間的間隔平均分布。今天剛剛學習了微信小程序，學習微信小程序之前首先得熟悉彈性布局showImg(https://segmentfault.com/img/bVYNPQ?...

Code4App 2019-08-01 18:01 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
學習關于display ：flex 布局問題！

摘要：什么是呢答是的縮寫，意為彈性布局這個東西的引入，為盒模型提供了最大的靈活性可以相應式的實現各種頁面的布局。基本概念采用布局的元素，稱為容器，簡稱容器。在這個容器中默認存在兩個軸水平方向的主軸和垂直方向上的交叉軸。很多人不明白這個display:flex是到底是什么東西，如何使用的。 1.什么是display：flex呢？答：flex是 flexible box的縮寫，意為彈性布局；...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0