プロパティ flex-direction

プロパティ flex-direction は、 主軸と交差軸の方向を設定します。つまり、 要素を行または列に配置します。

Flex コンテナの親要素に適用されます。 一括指定プロパティ flex-flow の一部です。

構文

cssセレクタ {
  flex-direction: row | row-reverse | column | column-reverse;
}

値

デフォルト値: row。

例

要素は行に配置され、デフォルトでは左端に揃えられ、 番号の順序は通常の順序 - 左から右 - です:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

例 . 値 row-reverse

要素は行に配置され、デフォルトでは右端に揃えられ、 番号の順序は逆の順序 - 右から左 - です:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

例 . 値 column

要素は列に配置され、デフォルトでは上端に揃えられ、 番号の順序は通常の順序 - 上から下 - です:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

例 . 値 column-reverse

要素は列に配置され、デフォルトでは下端に揃えられ、 番号の順序は逆の順序 - 下から上 - です:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

関連項目