標籤：
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>
###伸縮項目的屬性
1.order
定義項目的排列順序，數值越小，排列越靠前，預設值為0，文法為：order：整數值
2.flex-grow
定義伸縮項目的放大比例，預設值為0，即表示如果存在剩餘空間，也不放大，文法為：flex-grow：整數值
3.flex-shrink
定義伸縮項目的收縮能力，預設值為1 ，其文法為：flex-shrink:整數值
4.flex-basis
用來設定伸縮項目的基準值，剩餘的空間按比率進行伸縮，其文法為：flex-basis:length | auto，預設值為auto
5.flex
是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其文法為：flex:none | flex-grow flex-shrink flex-basis，其中第二個和第三個參數為選擇性參數，預設值為：0 1 auto
6.align-self
用來設定單獨的伸縮項目在交叉軸上的對齊，會覆蓋預設的對齊，其文法為：align-self:auto | flex-start | flex-end | center | baseline | stretch(伸縮項目在交叉軸方向佔滿伸縮容器，如果交叉軸為垂直方向的話，只有在不設定高度的情況下才能看到效果)
###在React Native中使用flexbox
RN目前主要支援flexbox的如下6個屬性：
1.alignItems
用來定義伸縮項目在交叉軸上的對齊，文法為：
alignItems:flex-start（預設值） | flex-end | center | stretch
2.alignSelf
用來設定單獨的伸縮項目在交叉軸上的對齊，會覆蓋預設的對齊，其文法為：alignSelf:auto | flex-start | flex-end | center | stretch(伸縮項目在交叉軸方向佔滿伸縮容器，如果交叉軸為垂直方向的話，只有在不設定高度的情況下才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其文法為：flex:none | flex-grow flex-shrink flex-basis，其中第二個和第三個參數為選擇性參數，預設值為：0 1 auto
4.flexDirection
指定主軸的方向 flex-direction:row| row-reverse | column（預設值） | column-reverse
5.flexWrap
6.justifyContent
<!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、配套視頻()：https://yunpan.cn/cY4JGpecp5K7c 訪問密碼 b832
##4、配套視頻()：https://yunpan.cn/cYIG6dCUNIRkB 訪問密碼 d6b6
用HTML5和React Native分別實現盒子模型顯示
寫法不一樣：1.樣式 2.元素 3.書寫格式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .height50 { height: 50px; } .height400 { height: 400px; } .height300 { height: 300px; } .height200 { height: 200px; } .height100 { height: 100px; } .width400 { width: 400px; } .bgred { background-color: #6AC5AC; } .bggreen { background-color: #414142; } .bgyellow { background-color: #D64078; } .box { display: flex; flex-direction: column; flex: 1; position: relative; color: #FDC72F; line-height: 1em; } .label { top: 0; left: 0; padding: 0 3px 3px 0; position: absolute; background-color: #FDC72F; color: white; line-height: 1em; } .top { width: 100%; justify-content: center; display: flex; align-items: center; } .bottom { width: 100%; display: flex; justify-content: center; align-items: center; } .right { width: 50px; display: flex; justify-content: space-around; align-items: center; } .left { width: 50px; display: flex; justify-content: space-around; align-items: center; } .heightdashed { position: absolute; right: 20px; height: 100%; border-left: 1px solid #FDC72F; } .widthdashed { position: absolute; left: 0px; width: 100%; bottom: 24px; border-top: 1px solid #FDC72F; } .margginBox { position:absolute; top: 100px; padding-left:7px; padding-right:7px; } .borderBox { flex: 1; display: flex; justify-content: space-between; } .paddingBox { flex: 1; display: flex; justify-content: space-between; } .elementBox{ flex: 1; display: flex; justify-content: space-between; } .measureBox { flex: 1; display: flex; justify-content: flex-end; align-items: flex-end; } </style> </head> <body> <span class="margginBox"> <span class="box height400 width400"> <span class="label"> margin </span> <span class="top height50 bgred"> top </span> <span class="borderBox"> <span class="left bgred"> left </span> <span class="box height300 "> <span class="label"> border </span> <span class="top height50 bggreen"> top </span> <span class="paddingBox"> <span class="left bggreen"> left </span> <span class="box height200 "> <span class="label"> padding </span> <span class="top height50 bgyellow"> top </span> <span class="elementBox"> <span class="left bgyellow"> left </span> <span class="box height100 "> <span class="label"> element </span> <span class="widthdashed"> </span> <span class="heightdashed"> </span> <span class="measureBox"> <span class="right"> height </span> </span> <span class="bottom height50"> width </span> </span> <span class="right bgyellow"> right </span> </span> <span class="bottom height50 bgyellow"> bottom </span> </span> <span class="right bggreen"> right </span> </span> <span class="bottom height50 bggreen"> bottom </span> </span> <span class="right bgred"> right </span> </span> <span class="bottom height50 bgred"> bottom </span> </span> </span> </body></html>
/** * Sample React Native App * https://github.com/facebook/react-native */‘use strict‘;import React, { AppRegistry, Component, StyleSheet, Text, View} from ‘react-native‘;class DongFang extends Component { render() { return ( <View style={[BoxStyles.margginBox]} ref="lab1"> <View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}> <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}> <Text style={BoxStyles.yellow}>top</Text></View> <View style={[BoxStyles.borderBox]}> <View style={[BoxStyles.left,BoxStyles.bgred]} > <Text style={BoxStyles.yellow}>left</Text></View> <View style={[BoxStyles.box,BoxStyles.height300]}> <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}> <Text style={BoxStyles.yellow}>top</Text></View> <View style={[BoxStyles.paddingBox]}> <View style={[BoxStyles.left,BoxStyles.bggreen]} > <Text style={BoxStyles.yellow}>left</Text></View> <View style={[BoxStyles.box,BoxStyles.height200]}> <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}> <Text style={BoxStyles.yellow}>top</Text></View> <View style={[BoxStyles.elementBox]}> <View style={[BoxStyles.left,BoxStyles.bgyellow]} > <Text style={BoxStyles.yellow}>left</Text></View> <View style={[BoxStyles.box,BoxStyles.height100]}> <View style={[BoxStyles.label]}> <Text style={BoxStyles.white}>element</Text></View> <View style={[BoxStyles.widthdashed]} ></View> <View style={[BoxStyles.heightdashed]} ></View> <View style={[BoxStyles.measureBox]} > <View style={[BoxStyles.right]}> <Text style={[BoxStyles.yellow]}>height</Text></View> </View> <View style={[BoxStyles.bottom,BoxStyles.height50]}> <Text style={BoxStyles.yellow}>width</Text></View> </View> <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View> </View> <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}> <Text style={BoxStyles.yellow}>bottom</Text></View> <View style={[BoxStyles.label]}> <Text style={BoxStyles.white}>padding</Text></View> </View> <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View> </View> <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}> <Text style={BoxStyles.yellow}>bottom</Text></View> <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View> </View> <View style={[BoxStyles.right,BoxStyles.bgred]}> <Text style={BoxStyles.yellow}>right</Text></View> </View> <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}> <Text style={BoxStyles.yellow}>bottom</Text></View> <View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View> </View> </View> ); }}const BoxStyles = StyleSheet.create({ height50:{ height: 50, }, height400:{ height: 400, }, height300:{ height: 300, }, height200:{ height: 200, }, height100:{ height: 100, }, width400:{ width: 400, }, width300:{ width: 300, }, width200:{ width: 200, }, width100:{ width: 100, }, bgred: { backgroundColor:‘#6AC5AC‘, }, bggreen: { backgroundColor: ‘#414142‘, }, bgyellow: { backgroundColor: ‘#D64078‘, }, box: { flexDirection: ‘column‘, flex: 1, position: ‘relative‘, }, label: { top: 0, left: 0, paddingTop: 0, paddingRight: 3, paddingBottom: 3, paddingLeft: 0, position: ‘absolute‘, backgroundColor: ‘#FDC72F‘, }, top: { justifyContent: ‘center‘, alignItems: ‘center‘, }, bottom: { justifyContent: ‘center‘, alignItems: ‘center‘, }, right: { width: 50, justifyContent: ‘space-around‘, alignItems: ‘center‘, }, left: { width: 50, justifyContent: ‘space-around‘, alignItems: ‘center‘, }, heightdashed: { bottom: 0, top: 0, right: 20, borderLeftWidth: 1, position: ‘absolute‘, borderLeftColor: ‘#FDC72F‘, }, widthdashed: { bottom: 25, left: 0, right: 0, borderTopWidth: 1, position: ‘absolute‘, borderTopColor: ‘#FDC72F‘, }, yellow: { color: ‘#FDC72F‘, fontWeight:‘900‘, }, white: { color: ‘white‘, fontWeight:‘900‘, }, margginBox:{ position: ‘absolute‘, top: 100, paddingLeft:7, paddingRight:7, }, borderBox:{ flex: 1, justifyContent: ‘space-between‘, flexDirection: ‘row‘, }, paddingBox:{ flex: 1, justifyContent: ‘space-between‘, flexDirection: ‘row‘, }, elementBox:{ flex: 1, justifyContent: ‘space-between‘, flexDirection: ‘row‘, }, measureBox:{ flex: 1, flexDirection: ‘row‘, justifyContent: ‘flex-end‘, alignItems:‘flex-end‘, }, container: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#F5FCFF‘, }, welcome: { fontSize: 20, textAlign: ‘center‘, margin: 10, }, instructions: { textAlign: ‘center‘, color: ‘#333333‘, marginBottom: 5, },});AppRegistry.registerComponent(‘DongFang‘, () => DongFang);
##5、配套視頻()：https://yunpan.cn/cYIGk4LBKw4y6 訪問密碼 fd93
3、手把手教React Native實戰之flexbox布局
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
