3、手把手教React Native實戰之flexbox布局

來源:互聯網
上載者:User

標籤:

 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布局

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.