css
投稿日
投稿者 dennie

【CSS】Flex コンテナ – 要素の並び方

Flexコンテナで指定する要素(Flexアイテム)の並び方について説明します。

要素を横並びさせたい場合、Flexコンテナを使用するだけでも可能です。

要素(Flexアイテム)の並ぶ方向 – flex-directionプロパティ

flex-directionプロパティを使用して、要素(Flexアイテム)の並び方を指定します。要素の並ぶ方向は左横並びだけでなく右横並び、縦並びも指定出来ます。

row要素を左並びにします。flex-directionプロパティを指定しない場合は、rowと同じ挙動になります。
row-reverse要素を右並びにします。
column要素を上から縦並びにします。
column-reverse要素を下から縦並びにします。
flex-directionプロパティで指定できる値

左横並び

HTML

<!-- 左並び -->
<div class="flex-container left">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 左並び */
.left {
  flex-direction: row;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

右横並び

HTML

<!-- 右並び -->
<div class="flex-container right">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 右並び */
.right {
  flex-direction: row-reverse;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

縦並び上から

HTML

<!-- 縦並び上から -->
<div class="flex-container vertical-top">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 縦並び上から */
.vertical-top {
  flex-direction: column;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

縦並び下から

HTML

<!-- 縦並び下から -->
<div class="flex-container vertical-bottom">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 100%;
  outline: solid red;
}

/* 縦並び下から */
.vertical-bottom {
  flex-direction: column-reverse;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

要素(Flexアイテム)の折り返し – flex-wrapプロパティ

FlexアイテムがFlexコンテナの幅または高さを超え場合、超えた分のFlexアイテムをどう並べるかを指定出来ます。これには flex-wrapプロパティ を使用します。

nowrapはみ出した要素を折り返しません。そのまま表示します。
flex-wrapプロパティを指定しない場合は、nowrapと同じ挙動になります。
wrapはみ出した要素を折り返します。
横並びの場合、はみ出した要素は下に回り込みます。
縦並びの場合、はみ出した要素は右に回り込みます。
wrap-reverseはみ出した要素を折り返します。
横並びの場合、はみ出した要素は上に回り込みます。
縦並びの場合、はみ出した要素は左に回り込みます。
flex-wrapプロパティで指定できる値

横並び

折り返しなし

HTML

<!-- nowrap -->
<div class="flex-container nowrap">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 110px;
  outline: solid red;
}

/* nowrap */
.nowrap {
  flex-wrap: nowrap;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

折り返し要素下

HTML

<!-- wrap -->
<div class="flex-container wrap">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 110px;
  outline: solid red;
}

/* wrap */
.wrap {
  flex-wrap: wrap;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

折り返し要素上

HTML

<!-- wrap-reverse -->
<div class="flex-container wrap-reverse">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  width: 110px;
  outline: solid red;
}

/* wrap-reverse */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

縦並び

折り返しなし

HTML

<!-- 折り返しなし -->
<div class="flex-container nowrap">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  outline: solid red;
}

/* 折り返しなし */
.nowrap {
  flex-wrap: nowrap;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

折り返し要素右

HTML

<!-- 折り返し要素右 -->
<div class="flex-container wrap">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  outline: solid red;
}

/* wrap */
.wrap {
  flex-wrap: wrap;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

折り返し要素左

HTML

<!-- wrap-reverse -->
<div class="flex-container wrap-reverse">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  outline: solid red;
}

/* wrap-reverse */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

flex-flow

flex-flow は flex-direction と flex-wrap を同時に指定出来ます。

HTML

<div class="flex-container flow">
  <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>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 120px;
  outline: solid red;
}

/* flex-flow */
.flow {
  flex-flow: row-reverse wrap;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  width: 50px;
  background-color: aquamarine;
}

結果

flex item 1
flex item 2
flex item 3

最後に

特にありません。

© DeNnie.Lab All Rights Reserved.