標籤：
flexbox是Flexible Box的縮寫，彈性盒子布局 主流的瀏覽器都支援
flexbox布局是伸縮容器(container)和伸縮項目(item)組成
Flexbox布局的主體思想是元素可以改變大小以適應可用空間，當可用空間變大，Flex元素將伸展大小以填充可用空間，當Flex元素超出可用空間時將自動縮小。總之，Flex元素是可以讓你的布局根據瀏覽器的大小變化進行自動調整。
按照伸縮流的方向布局
伸縮容器有主軸和交叉軸組成！ 主軸既可以是水平軸，也可以是垂直軸
flexbox目前還處於草稿狀態，所有在使用flexbox布局的時候，需要加上各個瀏覽器的私人首碼，即-webkit -moz -ms -o等
###伸縮容器的屬性
1.display
display:flex | inline-flex
塊級伸縮容器 行內級伸縮容器
2.flex-direction
指定主軸的方向 flex-direction:row（預設值）| row-reverse | column | column-reverse
3.flex-wrap
伸縮容器在主軸線方向空間不足的情況下，是否換行以及該如何換行
flex-wrap:nowrap（預設值） | wrap | wrap-reverse
4.flex-flow
是flex-direction和flex-wrap的縮寫版本，它同時定義了伸縮容器的主軸和側軸
，其預設值為 row nowrap
5.justify-content
用來定義伸縮項目在主軸線的對齊，文法為：
justify-content:flex-start（預設值） | flex-end | center | space-between | space-around
6.align-items
用來定義伸縮項目在交叉軸上的對齊，文法為：
align-items:flex-start（預設值） | flex-end | center | baseline | stretch
7.align-content
用來調整伸縮項目出現換行後在交叉軸上的對齊，文法為：
align-content:flex-start | flex-end | center | space-between | space-around | stretch（預設值）
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>Centering an Element on the Page</title> <style type="text/css"> html { height: 100%;} body { display: -webkit-box; /* 老版本文法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本文法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本文法: IE 10 */ display: -webkit-flex; /* 新版本文法： Chrome 21+ */ display: flex; /* 新版本文法： Opera 12.1, Firefox 22+ */ /*垂直置中*/ /*老版本文法*/ -webkit-box-align: center; -moz-box-align: center; /*混合版本文法*/ -ms-flex-align: center; /*新版本文法*/ -webkit-align-items: center; align-items: center; /*水平置中*/ /*老版本文法*/ -webkit-box-pack: center; -moz-box-pack: center; /*混合版本文法*/ -ms-flex-pack: center; /*新版本文法*/ -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100% /* needed for Firefox */} /*實現文本垂直置中*/h1 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem;} </style> </head><body> <h1>OMG, I’m centered</h1></body></html>
##3、配套視頻()：https://yunpan.cn/cY4JGpecp5K7c 訪問密碼 b832 或 http://vdisk.weibo.com/s/aLDC43gEHnge_
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>第二個flexbox例子</title> <style type="text/css"> html { height: 100%;} body { display: -webkit-box; /* 老版本文法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本文法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本文法: IE 10 */ display: -webkit-flex; /* 新版本文法： Chrome 21+ */ display: flex; /* 新版本文法： Opera 12.1, Firefox 22+ */flex-flow:row nowrap; /*垂直置中*/ /*老版本文法*/ -webkit-box-align: center; -moz-box-align: center; /*混合版本文法*/ -ms-flex-align: center; /*新版本文法*/ -webkit-align-items: center; align-items: center; /*水平置中*/ /*老版本文法*/ -webkit-box-pack: center; -moz-box-pack: center; /*混合版本文法*/ -ms-flex-pack: center; /*新版本文法*/ -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100% /* needed for Firefox */ } #box1{ background: red; height:100px; width: 80px; }#box2{ background: yellow; width: 80px; align-self:stretch; }#box3{ background: green; height:100px; width: 80px; align-self:stretch; } </style> </head><body> <div id="box1">第一個</div> <div id="box2">第二個</div> <div id="box3">第三個</div> </body></html>
3、手把手教React Native實戰之flexbox布局(RN基礎)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
