freeCodeCamp/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78ab367417b2b2512af2	使用 flex-direction 屬性創建一個行	0	https://scrimba.com/p/pVaDAv/cBEkbfJ	301110	use-the-flex-direction-property-to-make-a-row

--description--

給元素添加 display: flex 屬性可以讓它變成 flex 容器， 然後可以讓元素的項目排列成行或列。 只要給父元素添加 flex-direction 屬性，並把屬性值設置爲 row 或 column，即可橫向排列或縱向排列它的所有子元素。 創建一行將使子項水平對齊，創建一列將使子項垂直對齊。

flex-direction 的其他可選值還有 row-reverse 和 column-reverse。

注意： flex-direction 的默認值爲 row。

--instructions--

請爲 #box-container 添加 CSS 屬性 flex-direction，將其值設爲 row-reverse。

--hints--

#box-container 元素應有 flex-direction 屬性，其屬性值應爲 row-reverse。

assert($('#box-container').css('flex-direction') == 'row-reverse');

--seed--

--seed-contents--

<style>
  #box-container {
    display: flex;
    height: 500px;

  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

--solutions--

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: row-reverse;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>