HTML CSS Flexboxとは #CSS

要素を並べるのにfloat: left;使ってるけど、他にも並べる方法ないかなあ

参考サイト→https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1
随時更新します

Flexboxを使ってみよう

FlexboxとはFlexible Box Layout Moduleの略。左から順に並べられるのは勿論、右からや下からなど自由に要素をレイアウト出来る。

基本

flex_box01.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box01.css">
  </head>
<body>
  <div class="container01">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
  </div>
</body>
</html>

flex_box01.css

.container01 {
    display: flex;
}
.item {
    margin: 10px 10px;
    padding: 2px 4px;
    background: #f8dcdc;
}

display: flex;を親要素に適用し、子要素が横に並んだ。

Flexboxで親要素に指定するプロパティ

htmlは上と同じ。

flex-direction: row;

flex_box02.css

.container01 {
    display: flex;
    flex-direction: row;
}
.item {
    ~省略~
}

右から左へ並ぶ

flex-direction: row-reserve;

flex_box03.css

.container01 {
    display: flex;
    flex-direction: row-reverse;
}
.item {
    ~省略~
}

左から右へ並ぶ

flex-direction: column;

flex_box04.css

.container01 {
    display: flex;
    flex-direction: column;
}
.item {
    ~省略~
}

上から下へ並ぶ

flex-direction: column-reverse;

flex_box05.css

.container01 {
    display: flex;
    flex-direction: column-reverse;
}
.item {
    ~省略~
}

下から上へ並ぶ

flex-wrap: nowrap;

説明のために数を増やした

flex_box02.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box.css">
  </head>
<body>
  <div class="container02">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
    <div class="item">
      アイテム&ensp;5
    </div>
    <div class="item">
      アイテム&ensp;6
    </div>
    <div class="item">
      アイテム&ensp;7
    </div>
    <div class="item">
      アイテム&ensp;8
    </div>
    <div class="item">
      アイテム&ensp;9
    </div>
    <div class="item">
      アイテム&ensp;10
    </div>
  </div>
</body>
</html>

flex_box06.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: nowrap;
}
.item {
    ~省略~
}

折り返しなしで一行で並ぶ

flex-wrap: wrap;

flex_box06.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
}
.item {
    ~省略~
}

子要素が折り返して複数行になり、上から下へ並ぶ

flex-wrap: wrap-reverse;

flex_box07.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap-reverse;
}
.item {
    ~省略~
}

子要素が折り返して複数行になり、下から上へ並ぶ

flex-flow: ;

flex_box08.css

.container02 {
    margin: 10px auto;
    display: flex;
    flex-flow: row-reverse nowrap;
}

flex-directionとflex-wrapを一行で指定できるプロパティ。

justify-content: flex-start;

flex_box09.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-start;
}

10個だと分かりにくかったので5個にした。親要素に空いているスペースがあるとき、子要素を水平方向のどの位置に置くか指定。
flex-startは左揃えになる。

justify-content: flex-end;

flex_box10.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
}

flex-endは右揃えになる

justify-content: flex-center;

flex_box11.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-center;
}

flex-centerは中央揃えになる

justify-content: space-between;

flex_box12.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
}

最初の子要素を左端、最後の子要素を右端に配置し、残りの要素は均等に間隔をあけて配置