Help us understand the problem. What is going on with this article?

HTML CSS Flexboxとは

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

参考サイト→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;
}

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

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

htmlは上と同じ。

flex-direction: row;

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

20191129_Qiita02.png
右から左へ並ぶ

flex-direction: row-reserve;

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

20191129_Qiita03.png
左から右へ並ぶ

flex-direction: column;

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

20191129_Qiita04.png
上から下へ並ぶ

flex-direction: column-reverse;

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

20191129_Qiita05.png
下から上へ並ぶ

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 {
    ~省略~
}

20191129_Qiita06.png
折り返しなしで一行で並ぶ

flex-wrap: wrap;

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

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

flex-wrap: wrap-reverse;

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

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

flex-flow: ;

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

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

justify-content: flex-start;

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

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

justify-content: flex-end;

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

20191203_Qiita03.png
flex-endは右揃えになる

justify-content: flex-center;

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

20191203_Qiita04.png
flex-centerは中央揃えになる

justify-content: space-between;

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

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

a-takano
転職してコーダーやったり、ちょっと営業ぽいことやったり、ECサイトの勉強したり。 HTML/CSS/Javascript/WordPress 最近はコーディングをしていないのでいろいろ忘れている・・・
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away