啊灬啊灬啊灬快灬高潮了,浴室高潮bd在线观看,午夜精品a片一区二区三区

起源

2009年，W3C 提出了一種新的方案----Flex 布局，F(xiàn)lex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。目前，它已經得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項功能。

基本概念

采用 Flex 布局的元素，稱為 Flex 容器（flex container）。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item）。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做 main start，結束位置叫做 main end；交叉軸的開始位置叫做 cross start，結束位置叫做 cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做 main size，占據的交叉軸空間叫做 cross size

基本概念

命名方式

屬性命名為駝峰式的。正確：flexDirection。錯誤：flex-direction。

容器的屬性（flexDirection，flexWrap，justifyContent，alignItems）

flexDirection 屬性決定主軸的方向（即項目的排列方向）。

row：從左向右依次排列。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
    },
    red: {
        backgroundColor: 'red',
        height: 60,
        width: 60,
        margin: 5,

    },
    yellow: {
        backgroundColor: 'yellow',
        height: 60,
        width: 60,
        margin: 5,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 60,
        margin: 5,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

row

row-reverse：從右向左依次排列。

row-reverse

column：默認的排列方式，從上向下排列。

column

column-reverse：從下向上排列。

column-reverse

flexWrap 屬性定義了如果一條軸線排不下，如何換行。

nowrap（默認）：元素只排列在一行上，可能導致溢出。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
    },
    red: {
        backgroundColor: 'red',
        height: 60,
        width: 60,
        margin: 5,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 60,
        width: 60,
        margin: 5,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 60,
        margin: 5,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

row && nowrap

wrap：元素在一行排列不下時，就進行多行排列。

row && wrap

wrap-reverse：多行排列，對 wrap 做一個反轉。
RN 0.56 版本之后支持，目前 0.45.1 版本不支持此布局方式。

justifyContent 屬性定義了項目在主軸上的對齊方式。

flex-start（默認值）：與主軸起點對齊。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start'
    },
    red: {
        backgroundColor: 'red',
        height: 60,
        width: 100,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 60,
        width: 60,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 150,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flex-start

flex-end：與主軸終點對齊。

flex-end

center：主軸居中對齊。

center

space-between：兩端對齊，項目之間的間隔都相等。

space-between

space-around：每個項目兩側的間隔相等。項目之間的間隔比項目與邊框的間隔大一倍。

space-around

alignItems 屬性定義項目在交叉軸上如何對齊。

stretch（默認值）：如果項目未設置高度或設為 auto，將占滿整個容器的高度。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'stretch',
    },
    red: {
        backgroundColor: 'red',
        height: 'auto',
        width: 60,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 'auto',
        width: 60,
    },
    blue: {
        backgroundColor: 'blue',
        height: 'auto',
        width: 60,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

stretch

height 給了高度之后，更改 alignItems 屬性值的效果。

flex-start：元素向交叉軸起點對齊。

flex-start

flex-end：元素向交叉軸終點對齊。

flex-end

center：元素在交叉軸居中。如果元素在交叉軸上的高度高于其容器，那么在兩個方向上溢出距離相同。

center

baseline: 項目的第一行文字的基線對齊。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'baseline',
    },
    red: {
        backgroundColor: 'red',
        height: 150,
        width: 60,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 60,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 60,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}>
                    <Text style={{ color: 'black', fontSize: 20 }}>里奧</Text>
                </View>
                <View style={ScreenStyle.yellow}>
                    <Text style={{ color: 'black', fontSize: 16 }}>梅西</Text>
                </View>
                <View style={ScreenStyle.blue}>
                    <Text style={{ color: 'black', fontSize: 25 }}>涼涼</Text>
                </View>
            </View>
        );
    }

baseline

flex 屬性決定其占據父容器的比例。React Native 中 flex 只能是數(shù)字。如果是正整數(shù)，就是與數(shù)字的大小成比例。如果為 0 就是自生的大小，并且不能擴展。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
    },
    red: {
        backgroundColor: 'red',
        flex: 1,
    },
    yellow: {
        backgroundColor: 'yellow',
        flex: 2,
    },
    blue: {
        backgroundColor: 'blue',
        flex: 3,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flex

CSS 中 Flex 布局的內容在 React Native 中簡化了一些，flex-flow（屬性是 flexDirection 屬性和 flexWrap 屬性的簡寫形式，默認值為 row nowrap）和 align-content（屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用）屬性在 React Native 中沒有。

項目屬性（flexGrow，flexShrink，flexBasis，alignSelf）

flexGrow 屬性定義項目的放大比例，默認為 0，即如果存在剩余空間，也不放大。
如果所有項目的 flexGrow 屬性都為 1，則它們將等分剩余空間（如果有的話）。如果一個項目的 flexGrow 屬性為 2，其他項目都為 1，則前者占據的剩余空間將比其他項多一倍。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
    },
    red: {
        backgroundColor: 'red',
        width: 80,
        height: 80,
        flexGrow: 5,
    },
    yellow: {
        backgroundColor: 'yellow',
        width: 100,
        height: 100,
        flexGrow: 2,
    },
    blue: {
        backgroundColor: 'blue',
        width: 60,
        height: 60,
        flexGrow: 3,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flexGrow

將 flexDirection 改成 column

flexGrow

flexShrink 屬性定義了項目的縮小比例，默認為 1，即如果空間不足，該項目將縮小。
如果所有項目的 flexShrink 屬性都為 1，當空間不足時，都將等比例縮小。如果一個項目的 flexShrink 屬性為 0，其他項目都為 1，則空間不足時，前者不縮小。
負值對該屬性無效。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'baseline',
    },
    red: {
        backgroundColor: 'red',
        height: 150,
        width: 500,
        flexShrink: 1,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 200,
        flexShrink: 1,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 300,
        flexShrink: 0,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flexShrink

flexBasis 屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為 auto，即項目的本來大小。
它可以設為跟 width 或 height 屬性一樣的值（比如350px），則項目將占據固定空間。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'baseline',
    },
    red: {
        backgroundColor: 'red',
        height: 150,
        width: 500,
        flexBasis: 50,
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 200,
        flexBasis: 100,
    },
    blue: {
        backgroundColor: 'blue',
        height: 60,
        width: 300,
        flexBasis: 30,
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

flexBasis

alignSelf 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 alignItems 屬性。

auto: 按照自身設置的寬高來顯示，如果沒設置，效果跟 stretch 一樣。
flex-start: 與父容器頂部對齊。
flex-end: 與父容器底部對齊。
center: 位于中間位置。
stretch: 交叉軸拉伸，不設置具體的 width/height 的時候 stretch 才有效果。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    red: {
        backgroundColor: 'red',
        // height: 100,
        width: 100,
        alignSelf: 'stretch',
    },
    yellow: {
        backgroundColor: 'yellow',
        // height: 100,
        width: 100,
        alignSelf: 'stretch',
    },
    blue: {
        backgroundColor: 'blue',
        // height: 100,
        width: 100,
        alignSelf: 'stretch',
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}></View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

alignSelf_stretch

baseline: 項目的第一行文字的基線對齊。

const styles = {
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    red: {
        backgroundColor: 'red',
        height: 50,
        width: 100,
        alignSelf: 'baseline',
    },
    yellow: {
        backgroundColor: 'yellow',
        height: 100,
        width: 100,
        alignSelf: 'baseline',
    },
    blue: {
        backgroundColor: 'blue',
        height: 180,
        width: 100,
        alignSelf: 'baseline',
    },
};

    render() {
        return (
            <View style={ScreenStyle.container}>
                <View style={ScreenStyle.red}>
                    <Text style={{ color: 'black', fontSize: 25 }}>世界杯</Text>
                </View>
                <View style={ScreenStyle.yellow}></View>
                <View style={ScreenStyle.blue}></View>
            </View>
        );
    }

alignSelf_ baseline

Web CSS 不同之處

flexDirection: React Native 中默認為 flexDirection:'column'，在 Web CSS 中默認為 flex-direction:'row'
alignItems: React Native 中默認為 alignItems:'stretch'，在 Web CSS 中默認 align-items:'flex-start'
flex: 相比 Web CSS 的 flex 接受多參數(shù)，如:flex: 2 2 10%;，但在 React Native 中 flex 只接受一個參數(shù)
不支持屬性：align-content，order，flex-flow

其他布局屬性

視圖邊框

borderBottomWidth number 底部邊框寬度
borderLeftWidth number 左邊框寬度
borderRightWidth number 右邊框寬度
borderTopWidth number 頂部邊框寬度
borderWidth number 邊框寬度
border<Bottom|Left|Right|Top>Color 個方向邊框的顏色
borderColor 邊框顏色

尺寸

width number
height number

外邊距

margin number 外邊距
marginBottom number 下外邊距
marginHorizontal number 左右外邊距
marginLeft number 左外邊距
marginRight number 右外邊距
marginTop number 上外邊距
marginVertical number 上下外邊距

內邊距

padding number 內邊距
paddingBottom number 下內邊距
paddingHorizontal number 左右內邊距
paddingLeft number 做內邊距
paddingRight number 右內邊距
paddingTop number 上內邊距
paddingVertical number 上下內邊距

邊緣

left number 屬性規(guī)定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
right number 屬性規(guī)定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
top number 屬性規(guī)定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
bottom number 屬性規(guī)定元素的底部邊緣。該屬性定義了一個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。

定位(position)
position enum('absolute', 'relative')屬性設置元素的定位方式，為將要定位的元素定義定位規(guī)則。

absolute：生成絕對定位的元素，元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
relative：生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

練習

小游戲

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

ReactNative Flex 布局

ReactNative Flex 布局

起源

基本概念

命名方式

容器的屬性（flexDirection，flexWrap，justifyContent，alignItems）

項目屬性（flexGrow，flexShrink，flexBasis，alignSelf）

Web CSS 不同之處

其他布局屬性

練習

相關鏈接

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

ReactNative Flex 布局

起源

基本概念

命名方式

容器的屬性（flexDirection，flexWrap，justifyContent，alignItems）

項目屬性（flexGrow，flexShrink，flexBasis，alignSelf）

Web CSS 不同之處

其他布局屬性

練習

相關鏈接

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

容器的屬性（flexDirection，flexWrap，justifyContent，alignItems）

項目屬性（flexGrow，flexShrink，flexBasis，alignSelf）