ReactNative Flex 布局

起源

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

基本概念

采用 Flex 布局的元素，稱(chēng)為 Flex 容器（flex container）。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為 Flex 項(xiàng)目（flex item）。容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做 main start，結(jié)束位置叫做 main end；交叉軸的開(kāi)始位置叫做 cross start，結(jié)束位置叫做 cross end。項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size，占據(jù)的交叉軸空間叫做 cross size

基本概念
命名方式

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

容器的屬性（flexDirection，flexWrap，justifyContent，alignItems）
  1. flexDirection 屬性決定主軸的方向（即項(xiàng)目的排列方向）。
  • 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：默認(rèn)的排列方式，從上向下排列。
column
  • column-reverse：從下向上排列。
column-reverse
  1. flexWrap 屬性定義了如果一條軸線排不下，如何換行。
  • nowrap（默認(rèn)）：元素只排列在一行上，可能導(dǎo)致溢出。
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：元素在一行排列不下時(shí)，就進(jìn)行多行排列。
row && wrap
  • wrap-reverse：多行排列，對(duì) wrap 做一個(gè)反轉(zhuǎn)。
    RN 0.56 版本之后支持，目前 0.45.1 版本不支持此布局方式。
  1. justifyContent 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
  • flex-start（默認(rèn)值）：與主軸起點(diǎn)對(duì)齊。
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：與主軸終點(diǎn)對(duì)齊。
flex-end
  • center： 主軸居中對(duì)齊。
center
  • space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-between
  • space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
space-around
  1. alignItems 屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
  • stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為 auto，將占滿整個(gè)容器的高度。
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：元素向交叉軸起點(diǎn)對(duì)齊。
flex-start
  • flex-end：元素向交叉軸終點(diǎn)對(duì)齊。
flex-end
  • center：元素在交叉軸居中。如果元素在交叉軸上的高度高于其容器，那么在兩個(gè)方向上溢出距離相同。
center
  • baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
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 屬性決定其占據(jù)父容器的比例。React Native 中 flex 只能是數(shù)字。如果是正整數(shù)，就是與數(shù)字的大小成比例。如果為 0 就是自生的大小，并且不能擴(kuò)展。
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 布局的內(nèi)容在 React Native 中簡(jiǎn)化了一些，flex-flow（屬性是 flexDirection 屬性和 flexWrap 屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為 row nowrap）和 align-content（屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用）屬性在 React Native 中沒(méi)有。

項(xiàng)目屬性（flexGrow，flexShrink，flexBasis，alignSelf）
  1. flexGrow 屬性定義項(xiàng)目的放大比例，默認(rèn)為 0，即如果存在剩余空間，也不放大。
    如果所有項(xiàng)目的 flexGrow 屬性都為 1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的 flexGrow 屬性為 2，其他項(xiàng)目都為 1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
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
  1. flexShrink 屬性定義了項(xiàng)目的縮小比例，默認(rèn)為 1，即如果空間不足，該項(xiàng)目將縮小。
    如果所有項(xiàng)目的 flexShrink 屬性都為 1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的 flexShrink 屬性為 0，其他項(xiàng)目都為 1，則空間不足時(shí)，前者不縮小。
    負(fù)值對(duì)該屬性無(wú)效。
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
  1. flexBasis 屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為 auto，即項(xiàng)目的本來(lái)大小。
    它可以設(shè)為跟 width 或 height 屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。
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
  1. alignSelf 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋 alignItems 屬性。
  • auto: 按照自身設(shè)置的寬高來(lái)顯示，如果沒(méi)設(shè)置，效果跟 stretch 一樣。
  • flex-start: 與父容器頂部對(duì)齊。
  • flex-end: 與父容器底部對(duì)齊。
  • center: 位于中間位置。
  • stretch: 交叉軸拉伸，不設(shè)置具體的 width/height 的時(shí)候 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: 項(xiàng)目的第一行文字的基線對(duì)齊。
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 中默認(rèn)為 flexDirection:'column'，在 Web CSS 中默認(rèn)為 flex-direction:'row'
  • alignItems: React Native 中默認(rèn)為 alignItems:'stretch'，在 Web CSS 中默認(rèn) align-items:'flex-start'
  • flex: 相比 Web CSS 的 flex 接受多參數(shù)，如:flex: 2 2 10%;，但在 React Native 中 flex 只接受一個(gè)參數(shù)
  • 不支持屬性：align-content，order，flex-flow
其他布局屬性
  1. 視圖邊框
  • borderBottomWidth number 底部邊框?qū)挾?/li>
  • borderLeftWidth number 左邊框?qū)挾?/li>
  • borderRightWidth number 右邊框?qū)挾?/li>
  • borderTopWidth number 頂部邊框?qū)挾?/li>
  • borderWidth number 邊框?qū)挾?/li>
  • border<Bottom|Left|Right|Top>Color 個(gè)方向邊框的顏色
  • borderColor 邊框顏色
  1. 尺寸
  • width number
  • height number
  1. 外邊距
  • margin number 外邊距
  • marginBottom number 下外邊距
  • marginHorizontal number 左右外邊距
  • marginLeft number 左外邊距
  • marginRight number 右外邊距
  • marginTop number 上外邊距
  • marginVertical number 上下外邊距
  1. 內(nèi)邊距
  • padding number 內(nèi)邊距
  • paddingBottom number 下內(nèi)邊距
  • paddingHorizontal number 左右內(nèi)邊距
  • paddingLeft number 做內(nèi)邊距
  • paddingRight number 右內(nèi)邊距
  • paddingTop number 上內(nèi)邊距
  • paddingVertical number 上下內(nèi)邊距
  1. 邊緣
  • left number 屬性規(guī)定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
  • right number 屬性規(guī)定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
  • top number 屬性規(guī)定元素的頂部邊緣。該屬性定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
  • bottom number 屬性規(guī)定元素的底部邊緣。該屬性定義了一個(gè)定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。
  1. 定位(position)
    position enum('absolute', 'relative')屬性設(shè)置元素的定位方式，為將要定位的元素定義定位規(guī)則。
  • absolute：生成絕對(duì)定位的元素，元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
  • relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
練習(xí)

小游戲

相關(guān)鏈接

勾三股四

facebook.github.io

Flex 布局教程：語(yǔ)法篇

React Native布局詳細(xì)指南

CSS 參考手冊(cè)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,345評(píng)論 6贊 531
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,494評(píng)論 3贊 416
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事。” “怎么了？”我有些...
    開(kāi)封第一講書(shū)人閱讀 176,283評(píng)論 0贊 374
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我，道長(zhǎng)，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 62,953評(píng)論 1贊 309
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 71,714評(píng)論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書(shū)人閱讀 55,186評(píng)論 1贊 324
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音，去河邊找鬼。 笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,255評(píng)論 3贊 441
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 42,410評(píng)論 0贊 288
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 48,940評(píng)論 1贊 335
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,776評(píng)論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,976評(píng)論 1贊 369
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,518評(píng)論 5贊 359
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,210評(píng)論 3贊 347
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,642評(píng)論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 35,878評(píng)論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,654評(píng)論 3贊 391
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,958評(píng)論 2贊 373

推薦閱讀更多精彩內(nèi)容