CSS3 彈性盒子(Flex Box)

CSS3 彈性盒子(Flex Box)

彈性盒子是 CSS3 的一種新的布局模式坷备。
CSS3 彈性盒（ Flexible Box 或 flexbox）艾蓝，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞角Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列装悲、對(duì)齊和分配空白空間琢唾。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)兴蒸。
緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。

CSS3 彈性盒子內(nèi)容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成裳瘪。
彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器土浸。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
注意： 彈性容器外及彈性子元素內(nèi)是正常渲染的彭羹。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局黄伊。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行派殷。
以下元素展示了彈性子元素在一行內(nèi)顯示还最，從左到右:

實(shí)例
<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container { 
        display: -webkit-flex; 
        display: flex; 
        width: 400px; 
        height: 250px; 
        background-color: lightgrey;
      } 

      .flex-item { 
        background-color: cornflowerblue; 
        width: 100px; 
        height: 100px; 
        margin: 10px;
      }
    </style>
  </head>

  <body> 
    <div class="flex-container"> 
      <div class="flex-item">flex item 1</div> 
      <div class="flex-item">flex item 2</div> 
      <div class="flex-item">flex item 3</div> 
    </div> 
  </body>
</html>

嘗試一下 ?

當(dāng)然我們可以修改排列方式。
如果我們?cè)O(shè)置 direction 屬性為 rtl (right-to-left),彈性子元素的排列方式也會(huì)改變毡惜，頁面布局也跟著改變:

實(shí)例
body { 
  direction: rtl;
} 

.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
} 

.flex-item { 
  background-color: cornflowerblue; 
  width: 100px; 
  height: 100px; 
  margin: 10px;
}

嘗試一下 ?

flex-direction

flex-direction 順序指定了彈性子元素在父容器中的位置拓轻。

語法
flex-direction: row | row-reverse | column | column-reverse

flex-direction 的值有:

  • row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式经伙。
  • row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊扶叉，從后往前排，最后一項(xiàng)排在最前面帕膜。
  • column：縱向排列枣氧。
  • column-reverse：反轉(zhuǎn)縱向排列，從后往前排泳叠，最后一項(xiàng)排在最上面作瞄。

以下實(shí)例演示了 row-reverse 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-direction: row-reverse; 
  flex-direction: row-reverse; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 column 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 column-reverse 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-direction: column-reverse; 
  flex-direction: column-reverse; 
  width: 400px; 
  height: 250px;
  background-color: lightgrey;
}

嘗試一下 ?

justify-content 屬性

內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對(duì)齊危纫。
justify-content 語法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各個(gè)值解析:

  • flex-start：彈性項(xiàng)目向行頭緊挨著填充宗挥。這個(gè)是默認(rèn)值。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線种蝶，而后續(xù)彈性項(xiàng)依次平齊擺放契耿。

  • flex-end：彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線螃征，而后續(xù)彈性項(xiàng)依次平齊擺放搪桂。

  • center：彈性項(xiàng)目居中緊挨著填充。（如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出）踢械。

  • space-between：彈性項(xiàng)目平均分布在該行上酗电。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于flex-start内列。否則撵术，第1個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對(duì)齊，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊话瞧，然后剩余的彈性項(xiàng)分布在該行上嫩与，相鄰項(xiàng)目的間隔相等。

  • space-around：彈性項(xiàng)目平均分布在該行上交排，兩邊留有一半的間隔空間划滋。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center埃篓。否則处坪，彈性項(xiàng)目沿該行分布，且彼此間隔相等（比如是20px）都许，同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）稻薇。

效果圖展示：


以下實(shí)例演示了 flex-end 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-justify-content: flex-end; 
  justify-content: flex-end; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 center 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-justify-content: center; 
  justify-content: center; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 space-between 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-justify-content: space-between; 
  justify-content: space-between; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 space-around 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

align-items 屬性

align-items 設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。

語法
align-items: flex-start | flex-end | center | baseline | stretch

各個(gè)值解析:

  • flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界胶征。
  • flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
  • center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置桨仿。（如果該行的尺寸小于彈性盒子元素的尺寸睛低，則會(huì)向兩個(gè)方向溢出相同的長度）。
  • baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條服傍，則該值與'flex-start'等效钱雷。其它情況下，該值將參與基線對(duì)齊吹零。
  • stretch：如果指定側(cè)軸大小的屬性值為'auto'罩抗，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制灿椅。

以下實(shí)例演示了 stretch(默認(rèn)值) 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-align-items: stretch; 
  align-items: stretch; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 flex-start 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-align-items: flex-start; 
  align-items: flex-start; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 flex-end 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-align-items: flex-end; 
  align-items: flex-end; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 center 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-align-items: center; 
  align-items: center; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 baseline 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-align-items: baseline; 
  align-items: baseline; 
  width: 400px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

flex-wrap 屬性

flex-wrap 屬性用于指定彈性盒子的子元素?fù)Q行方式套蒂。

語法
flex-flow: ||

各個(gè)值解析:

  • nowrap - 默認(rèn)， 彈性容器為單行茫蛹。該情況下彈性子項(xiàng)可能會(huì)溢出容器操刀。
  • wrap - 彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行婴洼，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行
  • wrap-reverse -反轉(zhuǎn) wrap 排列骨坑。

以下實(shí)例演示了 nowrap 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-wrap: nowrap; 
  flex-wrap: nowrap; 
  width: 300px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 wrap 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-wrap: wrap; 
  flex-wrap: wrap;     
  width: 300px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

以下實(shí)例演示了 wrap-reverse 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-wrap: wrap-reverse; 
  flex-wrap: wrap-reverse; 
  width: 300px; 
  height: 250px; 
  background-color: lightgrey;
}

嘗試一下 ?

align-content 屬性

align-content 屬性用于修改 flex-wrap 屬性的行為。類似于 align-items , 但它不是設(shè)置彈性子元素的對(duì)齊柬采，而是設(shè)置各個(gè)行的對(duì)齊欢唾。

語法
align-content: flex-start | flex-end | center | space-between | space-around | stretch

各個(gè)值解析:

  • stretch 默認(rèn)且警。各行將會(huì)伸展以占用剩余的空間。
  • flex-start 各行向彈性盒容器的起始位置堆疊礁遣。
  • flex-end 各行向彈性盒容器的結(jié)束位置堆疊斑芜。
  • center 各行向彈性盒容器的中間位置堆疊。
  • space-between 各行在彈性盒容器中平均分布亡脸。
  • space-around 各行在彈性盒容器中平均分布押搪，兩端保留子元素與子元素之間間距大小的一半。

以下實(shí)例演示了 center 的使用:

實(shí)例
.flex-container { 
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-wrap: wrap; 
  flex-wrap: wrap; 
  -webkit-align-content: center; 
  align-content: center; 
  width: 300px; 
  height: 300px; 
  background-color: lightgrey;
}

嘗試一下 ?

彈性子元素屬性

排序
語法
order:

各個(gè)值解析:

  • <integer>：用整數(shù)值來定義排列順序浅碾，數(shù)值小的排在前面大州。可以為負(fù)值垂谢。

order 屬性設(shè)置彈性容器內(nèi)彈性子元素的屬性:

實(shí)例
.flex-item { 
  background-color: cornflowerblue; 
  width: 100px; 
  height: 100px; 
  margin: 10px;
}

.first { 
  -webkit-order: -1; 
  order: -1;
}

嘗試一下 ?

對(duì)齊

設(shè)置"margin"值為"auto"值厦画，自動(dòng)獲取彈性容器中剩余的空間。所以設(shè)置垂直方向margin值為"auto"滥朱，可以使彈性子元素在彈性容器的兩上軸方向都完全集中根暑。
以下實(shí)例在第一個(gè)彈性子元素上設(shè)置了 margin-right: auto; 。 它將剩余的空間放置在元素的右側(cè)：

實(shí)例
.flex-item { 
  background-color: cornflowerblue; 
  width: 75px; 
  height: 75px; 
  margin: 10px;
} 

.flex-item:first-child { 
  margin-right: auto;
}

嘗試一下 ?

完美的居中

以下實(shí)例將完美解決我們平時(shí)碰到的居中問題徙邻。
使用彈性盒子排嫌，居中變的很簡(jiǎn)單，只想要設(shè)置 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:

實(shí)例
.flex-item { 
  background-color: cornflowerblue; 
  width: 75px;
  height: 75px; 
  margin: auto;
}

嘗試一下 ?

align-self

align-self 屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式缰犁。

語法
align-self: auto | flex-start | flex-end | center | baseline | stretch

各個(gè)值解析:

  • auto：如果'align-self'的值為'auto'淳地，則其計(jì)算值為元素的父元素的'align-items'值，如果其沒有父元素帅容，則計(jì)算值為'stretch'颇象。
  • flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
  • flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界并徘。
  • center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置遣钳。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長度）麦乞。
  • baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條蕴茴，則該值與'flex-start'等效。其它情況下路幸，該值將參與基線對(duì)齊荐开。
  • stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸简肴，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制晃听。

以下實(shí)例演示了彈性子元素上 align-self 不同值的應(yīng)用效果：

實(shí)例
.flex-item { 
  background-color: cornflowerblue; 
  width: 60px; 
  min-height: 100px; 
  margin: 10px;
} 

.item1 { 
  -webkit-align-self: flex-start; 
  align-self: flex-start;
}
.item2 { 
  -webkit-align-self: flex-end; 
  align-self: flex-end;
} 
.item3 { 
  -webkit-align-self: center; 
  align-self: center;
} 
.item4 { 
  -webkit-align-self: baseline; 
  align-self: baseline;
} 
.item5 { 
  -webkit-align-self: stretch; 
  align-self: stretch;
}

嘗試一下 ?

flex

flex 屬性用于指定彈性子元素如何分配空間。

語法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各個(gè)值解析:

  • auto: 計(jì)算值為 1 1 auto
  • initial: 計(jì)算值為 0 1 auto
  • none：計(jì)算值為 0 0 auto
  • inherit：從父元素繼承
  • [ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。
  • [ flex-shrink ]：定義彈性盒子元素的收縮比率能扒。
  • [ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值佣渴。

以下實(shí)例中，第一個(gè)彈性子元素占用了 2/4 的空間初斑，其他兩個(gè)各占 1/4 的空間:

實(shí)例
.flex-item { 
  background-color: cornflowerblue; 
  margin: 10px;
} 

.item1 { 
  -webkit-flex: 2; 
  flex: 2;
} 
.item2 { 
  -webkit-flex: 1; 
  flex: 1;
} 
.item3 { 
  -webkit-flex: 1; 
  flex: 1;
}

嘗試一下 ?

更多實(shí)例

使用彈性盒子創(chuàng)建響應(yīng)式頁面

CSS3 彈性盒子屬性

下表列出了在彈性盒子中常用到的屬性:

屬性 描述
display 指定 HTML 元素盒子類型辛润。
flex-direction 指定了彈性容器中子元素的排列方式
justify-content 設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
align-items 設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式见秤。
flex-wrap 設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行砂竖。
align-content 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對(duì)齊鹃答，而是設(shè)置行對(duì)齊
flex-flow flex-direction 和 flex-wrap 的簡(jiǎn)寫
order 設(shè)置彈性盒子的子元素排列順序乎澄。
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性测摔。
flex 設(shè)置彈性盒子的子元素如何分配空間置济。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市锋八，隨后出現(xiàn)的幾起案子浙于，更是在濱河造成了極大的恐慌，老刑警劉巖挟纱，帶你破解...
    沈念sama閱讀 216,470評(píng)論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件羞酗，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡紊服，警方通過查閱死者的電腦和手機(jī)整慎，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門围苫，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人撤师，你說我怎么就攤上這事剂府。” “怎么了剃盾？”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵腺占，是天一觀的道長。 經(jīng)常有香客問我痒谴，道長衰伯，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任积蔚，我火速辦了婚禮意鲸，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己怎顾，他們只是感情好读慎，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著槐雾，像睡著了一般夭委。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上募强，一...
    開封第一講書人閱讀 51,155評(píng)論 1贊 299
  • 城市分裂傳說
    那天株灸，我揣著相機(jī)與錄音，去河邊找鬼擎值。 笑死慌烧，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的幅恋。 我是一名探鬼主播杏死，決...
    沈念sama閱讀 40,041評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼捆交！你這毒婦竟也來了淑翼？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,903評(píng)論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤品追，失蹤者是張志新（化名）和其女友劉穎玄括，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肉瓦，經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡遭京，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泞莉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哪雕。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖鲫趁，靈堂內(nèi)的尸體忽然破棺而出斯嚎，到底是詐尸還是另有隱情，我是刑警寧澤挨厚，帶...
    沈念sama閱讀 35,417評(píng)論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布堡僻，位于F島的核電站，受9級(jí)特大地震影響疫剃，放射性物質(zhì)發(fā)生泄漏钉疫。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一巢价、第九天 我趴在偏房一處隱蔽的房頂上張望牲阁。 院中可真熱鬧固阁，春花似錦、人聲如沸咨油。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽役电。三九已至赚爵，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間法瑟，已是汗流浹背冀膝。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留霎挟，地道東北人窝剖。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2贊 368
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像酥夭，于是被迫代替她去往敵國和親赐纱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2贊 353

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