見出し画像

【web】要素の横並び（flex）

つちだにんじん

こんにちは、つちだにんじんです。
今回は要素を横並びにするときに使うflexについて書きます。
これ、とても便利なので知っておいて損はないです！！！


flexについて

flexとは、CSSのdisplayプロパティの値のひとつです。
display: flex;を指定すると、指定の要素内にあるものを横並びにしてくれます。

flexを指定するのは、横並びにしたいものを入れている箱（親要素）に指定します。

<!---HTML-->
<div class="flex-box">
 <div>コンテンツ１</div>
 <div>コンテンツ２</div>
</div>
/*CSS*/
.flex-box{
 display: flex;
}

こんな感じです。
「flex-boxの中身を横並びにしてー！」という感じです。

flexにした要素に使えるプロパティ色々

align-items

まずは align-items です。
これは、flexで横並びにした要素の縦軸の間隔を指定できるものです。

【値】
・center = 中央揃え

.flex-box{
 display: flex;
 align-items: center;
}

・base-line = ベースラインに揃える

.flex-box{
 display: flex;
 align-items: base-line;
}

・flex-start = 先頭に揃える

.flex-box{
 display: flex;
 align-items: flex-start;
}

・flex-end = 末尾に揃える

.flex-box{
 display: flex;
 align-items: flex-end;
}

・stretch = 幅や高さの制約の範囲内で同じになるよう拡張する

.flex-box{
 display: flex;
 align-items: strech;
}

このalign-itemsは結構便利です。
例えば

こういうレイアウトの時はflexにして横並びさせて、上はalign-items: center;で下はalign-items: flex-start;にするとか・・・
flex-startなら文字数が違っても上揃えになるのでガタガタにならずに済みますね。

こういう配置もよく見かけますが、flexにしてalign-items: center;を指定してやれば一発ですね！

justify-content

次はjustify-contentです。
これは横並びにした要素を配置する横軸の間隔の指定です。
【値】
・center = 中央よせ

.flex-box{
 display: flex;
 justify-content: center;
}


・flex-start = フレックスアイテムの先頭よせ
・start = 要素の先頭よせ
・left = 左よせ

/*フレックスアイテムの先頭寄せ*/
.flex-box{
 display: flex;
 justify-content: flex-start;
}

/*要素の先頭寄せ*/
.flex-box{
 display: flex;
 justify-content: start;
}

/*左寄せ*/
.flex-box{
 display: flex;
 justify-content: left;
}


・flex-end = フレックスアイテムの末尾よせ
・end = 要素の末尾よせ
・right = 右よせ

/*フレックスアイテムの末尾寄せ*/
.flex-box{
 display: flex;
 justify-content: flex-end;
}

/*要素の末尾寄せ*/
.flex-box{
 display: flex;
 justify-content: end;
}

/*右寄せ*/
.flex-box{
 display: flex;
 justify-content: right;
}


・space-between = 両端揃え

.flex-box{
 display: flex;
 justify-content: space-between;
}


・space-around = フレックスアイテムの両端の余白を均等につけて配置

.flex-box{
 display: flex;
 justify-content: space-around;
}


・space-evenly = フレックスアイテム間の全ての余白を均等にして配置

.flex-box{
 display: flex;
 justify-content: space-evenly;
}


これもなかなか便利で、特に後半３つはレスポンシブ的にも使いやすいです。

こういう配置の時によくjustify-contentを使用しています。

order

次はorderです。
これは横並びにする順番を自由に指定できるものです。

特に指定がなければこういう並びになるのが基本です。
ちなみにこれを逆向きにしたいだけであれば、

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

このflex-direction: row-reverse;を指定すればOKです。

orderは順番の秩序関係なく、自由に並び順を変えることができるものです。

こんな感じです。

flex-wrap

flex-flowは並べた要素の折り返し指定です。
文要素からはみ出ないよう、自動で折り返してくれるものです。

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


こんな感じで、入りきれないと判断されたタイミングで折り返されます。
折り返さないようにしたいときは、flex-wrap: nowrap;を指定してください。（規定値は折り返しなしなので、指定なしのままなら折り返しはされません。）

レスポンシブを考える

flexって、レスポンシブ的にもとても便利なんです。

PC表示ではそのままflexで横並びにしておき、SP表示では縦並びに戻すようにすればOKです！
方法としては、

/*flexを解除するやり方*/
.flex-box[
 display: block;
}

/*解除せず縦並びにするやり方*/
.flex-box{
 display: flex;
 flex-direction: column;
}

１つ目のものはflexそのものを解除するやり方です。
display: block;を指定することでdisplay: flex;を打ち消しています。

２つ目のものは、解除ではなくflexの並び順を横並びではなく、縦に並ぶよう指定するものです。

どちらでも好きな方を使えばいいと思います！笑


flexには他にもフレックスアイテムの幅を指定したりすることもできて便利です。
floatを使うより見た目が崩れにくいという利点もありますので、ぜひ活用してみてください！！！

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！

いいなと思ったら応援しよう！