Flexboxの使い方(折り返し, 横並び, 縦並び)
最終更新日:

Flexboxの「基本的な概念」「各プロパティの使い方」について解説します。各プロパティごとにCODEPENでサンプルソースを作っています。ソースを編集しながら動きを確認してみてください。

FlexコンテナとFlexアイテム

Flexコンテナ という親要素が、複数の Flexアイテム を子要素として持ちます。
FlexコンテナとFlexアイテムで設定するプロパティが異なります。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

上記でいうと、 containerクラスが親要素、 itemクラスが子要素になります。
親要素のcontainerクラスに display:flex を定義してFlexコンテナにしてみます。

Flexコンテナで使うプロパティ

flex-wrap|折り返し

「子要素の合計幅」が「親要素の幅」を超えて複数行になる場合の折り返し設定ができます。

設定 説明
nowrap(デフォルト) 幅が収まるように縮小して、折り返さない
wrap はみ出たものは下に折り返す
wrap-reverse はみ出たものは上に折り返す

flex-direction|並べる方向

Flexアイテムを並べる方向を設定できます。

設定 説明
row(デフォルト) 左から右へ、上から下へ
row-reverse 右から左へ、上から下へ
column 上から下へ、左から右へ
column-reverse 下から上へ、左から右へ

justify-content|横の位置揃え

横方向にスペースがあるときの位置揃えを設定できます。
(flex-directionで横配置を指定)

設定 説明
flex-start(デフォルト) 左揃え
flex-end 右揃え
center 中央
space-between 間隔空け(両端の隙間なし)
space-around 間隔空け(両端の隙間あり)

align-content|複数行での行間隔

複数行になったときの行間隔を設定できます。

設定 説明
stretch(デフォルト)
flex-start 上揃え
flex-end 下揃え
center 中央
space-between 間隔空け(両端の隙間なし)
space-around 間隔空け(両端の隙間あり)

align-items|Flexアイテムを並べる軸

Flexアイテムを並べる軸を設定できます。

設定 説明
stretch(デフォルト)
flex-start 上揃え
flex-end 下揃え
center boxの高さで中央揃え
baseline テキストのラインで中央揃え

Flexアイテムで使うプロパティ

order|表示順

表示順を設定できます。デフォルトは0で小さいもの順です。

flex-grow|伸びる長さの比率

空いたスペース分だけ、伸びる長さの比率を設定できます。 デフォルトは0 です。
1つのflexアイテムだけに flex-grow: 1; と定義すると、空いたスペースを全て、定義したflexアイテムで利用できます。

flex-shrink|縮む長さの比率

スペースが不足したとき、縮む長さの比率を設定できます。 デフォルトは1 です。

flex-basis|ベース幅

width同様に、ベース幅を設定できます。 デフォルトはauto です。

flex|grow, shrink, basis

flex-grow、flex-shrink、flex-basisをまとめて設定できます。
デフォルトは、 0 1 auto となります。

align-self|位置揃え

align-itemsより優先して、位置揃えを設定できます。

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。