Arusan Blog > CSS > [HTML&CSS]display:flex;（flexbox)の使い方
CSS

[HTML&CSS]display:flex;（flexbox)の使い方

今回は、要素を横並びにするdisplay:flex;(flexbox)の使い方を、

画像とコード例をお見せしながらわかりやすくご紹介します。

display:flex;（flexbox)の使い方

まずは、要素を横並びにする際に、よく使うflexboxの親要素をご紹介します。

flexboxの親要素

flexboxの親要素って何？

と思った方もいると思うので、以下の画像とコードをご覧ください。

画像のHTML&CSSコード

HTML


<section class="news">
    <div class="news__inner">
//親要素
      <div class="box">
//子要素
        <div class="box__item">
          <h2>見出し</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="box__item">
          <h2>見出し2</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="box__item">
          <h2>見出し3</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
       </div>
      </div><!-- box -->
    </div>
  </section>

CSS


.news__inner {
  width: 1000px;
  margin: 0 auto;
}

//親要素
.box {
  margin: 0 auto;
  padding: 60px;
  border: 2px solid #333;
  display: flex;
}

//子要素
.box__item {
  margin-right: 20px;
  padding: 20px;
  border: 1px solid #333;
}

.box__item:last-child {
  margin-right: 0;
}

.box__item > h2 {
  text-align: center;
}

Flexboxの親要素とは、横並びにした子要素を囲んでいる要素のことです。

そして、Flexboxの親要素に対して、『display: flex;』を記載することで、

子要素が、横並びになります。

ここからは、Flexboxの親要素に使えるCSSコードをご紹介します。

以下の表は、Flexboxの親要素で使えるコードになります。

flex-direction子要素の並ぶ向き
flex-wrap子要素を折り返す
flex-flowflex-directionとflex-wrapをまとめて設定
justify-content水平方向の揃え方を設定
align-items垂直方向の揃え方を設定
align-content複数行の揃え方を設定

それでは、それぞれの使用例とコードをご覧ください。

flex-direction

row初期設定
row-reverse右揃えになり、子要素の順番が反対になる
column縦並びになる
column-reverse並びが反対になる

HTML


 <div class="box">
        <div class="box__item">
          <h2>見出し</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="box__item">
          <h2>見出し2</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="box__item">
          <h2>見出し3</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
       </div>
      </div><!-- box -->

CSS


・・・省略・・・

.box {
  ・・・
  display: flex;
  flex-direction: row;
}

・・・省略・・・

flex-wrap

nowrap折り返しをしない
wrap横幅が足りなくなった場合、子要素を折り返す
wrap-reverse子要素を下の階層から埋めていく

CSS


・・・省略・・・

.box {
  ・・・
  display: flex;
  flex-wrap: nowrap;
}

・・・省略・・・

flex-flow

CSS



・・・省略・・・

.box {
  ・・・
  display: flex;
  flex: row nowrap;
}

・・・省略・・・

このように、flexは、flex-directionとflex-wrapをまとめて指定することができ、

『flex: (flex-direction) (flex-wrap);』と記載する。

justify-content

flex-start左揃え
flex-end右揃え
center中央揃え
space-around横幅に合わせて子要素を左右均等に配置する
space-between子要素の最初と最後を親要素いっぱいに配置する

CSS



・・・省略・・・

.box {
  ・・・
  display: flex;
  justify-content: flex-start;
}

・・・省略・・・

align-items

stretch子要素は、親要素の高さ分伸びる
flex-start子要素は、親要素の上部に配置される
flex-end子要素は、親要素の下部に配置される
center子要素は、親要素の中央に配置される
baselineベースラインに沿って配置

CSS


・・・省略・・・

.box {
  ・・・
  display: flex;
  align-items: stretch;
}

・・・省略・・・

align-content

stretch初期値
flex-start複数行を、親要素の上部に配置する
flex-end複数行を、親要素の下部に配置する
center複数行を、親要素の中央に配置する
space-around複数行を、親要素の縦幅に合わせて上下均等に余白を空け配置する
space-between複数行の最初と最後の子要素を、最上部と最下部に配置する

CSS



・・・省略・・・

.box {
  ・・・
  display: flex;
  align-content: space-around;
 }
・・・省略・・・

Flexboxの子要素

それでは、Flexboxの子要素で使えるCSSコードをご紹介します。

以下の表は、Flexboxの子要素で使えるコードになります。

order子要素の順番を指定する
flex-grow子要素の伸び率を指定する
flex-shrink子要素の縮む率を指定する
flex-basis子要素のベースとなる幅を指定する
flexflex-grow、flex-shrink、flex-basisをまとめて指定する
align-self子要素の垂直方向を揃える

それでは、それぞれの使用例とコードをご覧ください。

order

orderを使うと、画像のように数字が高くなるにつれ、

子要素の順番が後ろへと移動します。

CSS


・・・省略・・・

.box {
  ・・・
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}

.item__1 {
  order: 2;
}

.item__2 {
  order: 0;
}

.item__3 {
  order: -1;
}

.item__4 {
  order: 3;
}

・・・省略・・・

flex-grow

画像のように、数字が大きくなるにつれ、子要素の伸び率が大きくなります。

CSS


・・・省略・・・

.box {
  ・・・
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-around;
}

.item__1 {
 flex-grow: 1;
}

.item__2 {
  flex-grow: 2;
}

.item__3 {
  flex-grow: 1;
}

・・・省略・・・

flex-shrink

flex-shrinkは、親要素の横幅に対して、

子要素の横幅の合計が大きくなった場合に、

子要素の横幅を縮めるためのコードです。

画像のように、数字が大きくなるにつれ、子要素が縮みます。

HTML


 <section class="news">
    <div class="news__inner">
      <div class="box box1">
        <div class="box__item item__1">
          <h2>見出し1</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="box__item item__2">
          <h2>見出し2</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="box__item item__3">
          <h2>見出し3</h2>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
       </div>
      </div><!-- box -->

CSS


.news {
  margin-top: 100px;
}

.news__inner {
  width: 1000px;
  margin: 0 auto;
}

.box {
  height: 500px;
  margin: 0 auto 100px;
  padding: 20px 0;
  border: 2px solid #333;
  display: flex;
}

.item__1 {
 flex-shrink: 2;
}

.item__2 {
  flex-shrink: 3;
}

.item__3 {
  flex-shrink: 1;
}

.box__item {
  flex-basis: 500px;
  padding: 20px;
  border: 1px solid #333;
}

.box__item > h2 {
  text-align: center;
}

flex-basis

こちらは、子要素のベースとなる幅を指定します。

CSS


・・・省略・・・

.box__item {
  flex-basis: 200px;
  padding: 20px;
  border: 1px solid #333;
}

・・・省略・・・

flex

こちらは、flex-grow、flex-shrink、flex-basisをまとめて設定するコードです。

以下の使用例をご覧ください。

CSS


・・・省略・・・

.box__item {
  flex: 1 1 200px;
  padding: 20px;
  border: 1px solid #333;
}

・・・省略・・・

このように、『flex: flex-grow / flex-shrink / flex-basis ; 』の順番で記載しましょう。

align-self

画像のように、子要素の垂直方向に対しての揃え方を設定します。

flex-start垂直方向に対して、上部に配置
flex-end垂直方向に対して、下部に配置
auto初期値
baseline垂直方向に対して、上部に配置
center垂直方向に対して、中央に配置
stretch垂直方向に対して、親要素いっぱいに広がる

CSS


・・・省略・・・

.box__item {
  align-self: baseline;
  padding: 20px;
  border: 1px solid #333;
}

・・・省略・・・

まとめ

今回は、display:flex;（flexbox)の使い方について解説しました。

ボリュームはありますが、flexboxはよく使うCSSなので、

何度も復習をして、マスターするようにしましょう！

以下の記事では、displayに関して解説していますので、

こちらの記事もぜひ！

[これで完璧理解]display:block、inline、inline-block

それでは、最後まで読んでいただきありがとうございました。

タグ
CSS
関連記事
[HTML&CSS]擬似要素と擬似クラスの種類と使い方[後編]
background-sizeの使い方[HTML&CSS]
[HTML&CSS]お問い合わせフォームに自動変換機能をつける方法
background-imageの使い方[HTML&CSS]
[@keyframes、animation]CSSアニメーションの使い方[後編]
[transition、transform]CSSアニメーションの使い方[前編]
[HTML&CSS]擬似要素と擬似クラスの種類と使い方[前編]
imgをCSSで編集する際のコード[border-radiusなど]
この記事をシェアする