CSS Flex Box Chapter2.

material from: freeCodeCamp、CSS Tools: Reset CSS

Use the flex-direction Property to Make a Row & Column

透過新增display:flex;這個屬性設定到元素上，該元素就會變成一個有彈性的容器(flex container)。

接下來可以進一步設定flex-direction，調整容器內部子元素的擺放方式，是要以列(row)或欄(column)作排列。

設定flex-direction:row;則子元素會以水平方向作排列；設定flex-direction:column;則子元素會以
鉛直方向作排列。

順帶一提，若想要倒序排列子元素，則可分別設定flex-direction:row-reverse;或flex-direction:column-reverse;。

在不做任何設定的情況下，預設flex-direction:row;。

• Initial

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

• flex-direction:row;

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: row;
  }
  ...

• flex-direction:column;

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: column;
  }
  ...

• flex-direction:row-reverse;

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: row-reverse;
  }
  ...

• flex-direction:column-reverse;

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: column-reverse;
  }
  ...