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

1.8 KiB
Raw Permalink Blame History

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-reversecolumn-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>