どうも、チャーさんです。
あなたはflexというcssのプロパティを使い、
要素を横並びにする方法を知りたい。
そう思っていませんか？
この記事ではcssのflexを使い、
要素を横並びにする方法を紹介しています。
なので、あなたがこの記事を読めば、
flexを使い簡単に要素を横並びにできるようになります。
ページ制作も非常にはかどります。
flexの横並びは、floatなどと違い、
非常に簡単です。
そのため、あなたがflexで横並びをしたい、
そう思っているならこのまま下にスクロールして、
読んでみてください。
スポンサードサーチ
目次
flexcssを使って横並びにする方法はこれ
で早速結論です。
flexを使って、複数の要素を横並びにするには、
その複数の要素を包む親要素を作って、
親要素にdisplay:flexというcssをつけるだけです。
なぜこうするかというと、
親要素を作り、親要素にdisplay:flex;
とつけるだけで全部いい感じに横並びにしてくれるからです。
ということで、早速具体例をみてみましょう。
まず要素として、ボックスを３つ、
pタグでの文章を１つ用意しました。
これらを全部とりあえず横に並べたいとします。
で、早速紹介しました通り、
これらのボックスとpタグの親要素である、
parentクラスをつけた、親divにdisplay:flex;をつけると、
はい、こんな風に、全部綺麗に横並びに、
なってくれました。
非常に楽ですね。
たった１行付け加えるだけで、
横並びになってくれます。
このflexではfloatで横並びにするように、
あとでfloatを切る必要もありません。
さらに、pタグで書いた文章も、
縦方向にも中央寄せが自動でされており、
デザイン調整も少なく非常に便利です。
というわけで、pタグの縦方向の中央寄せは、
少し余談でしたが、複数の要素を、
横並びにするならdisplay:flex;を使うといいです。
親要素を作り、それに１行flexとつけてやるだけで、
綺麗に横並びになってくれますので、
ストレスも少なく非常に便利ですよ。
スポンサードサーチ
flexcssで横並びにする手順を以下では説明
で、やり方がわからない時のために手順を補足します。
子要素を用意しましょう
まずは横並びにしたい子要素を、
用意しましょう。
なぜならこれがないとそもそも、
横並びできませんので。
例としては、画像と文章ですね。
コーディングやwebページの制作では、
画像の横に文章を配置みたいなのがよくあるので、
そんな感じです。
親要素で囲いましょう
で要素を用意できたら、
次にそれらの要素を包む親要素を作りましょう。
理由は親要素を作らないと、
flexを使っても横並びにならないからです。
なので親要素を作りましょう。
具体例としては、
<div class=”parent”>
<div class=”child”>
</div>
<div class=”child”>
</div>
<div class=”child”>
</div>
</div>
みたいな感じですね。
親要素にdisplay:flex;と書きましょう。
で、親要素を用意したら、
その親要素に、display:flex;
と１行付け足しましょう。
すると、ブラウザを再読み込みすれば、
要素が綺麗に横並びになってくれるでしょう。
スポンサードサーチ
余談：flexの横並び以外の機能を少し紹介
またflexですが、
横並び以外にも様々な機能があります。
ということで、具体例付きで、
少し紹介していこうと思います。
逆の横並び
先ほどは要素の横並びを紹介しましたが、
同じ横並びでも逆の横並びができます。
これをやるには、
flex-direction:row-reverse;
と親要素にcssを付け足すといいです。
すると、
逆に並びましたね。
ちなみに、横並びの逆にする際に、
flex-direction:row-reverse;をつけました。
が、display:flex;をつけた場合は、
初期値でflex-direction:row;(通常の横並び)
が適応されてるので、それも知っておきましょう。
flexの横並びで要素の間に隙間をつける
また、同じ普通の横並びでも、
横並びで要素の間にスペースをつけることもできます。
この場合は、
justify-content:space-around;
と付け加えれば要素の間に隙間ができます。
こんな風に。
flexは縦並びも可能です
また、横並び以外にも、
縦並びもできます。
その場合は、
flex-direction:column;とつけましょう。
すると、
縦に並びました。
flexでは逆の縦並びもできます
またこれを逆に縦並びもできます。
その際は、
flex-direction:column-reverse;
とつけましょう。
すると、
要素が縦に逆に並べ替えられましたね。
またflexには他にも色々な機能がありますが、
この記事の趣旨はあくまでflexでの横並びなので、
きになる場合は調べてみてください。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssのflexで横並びにするには、
横並びにしたい要素を包む親要素を作り、
親要素にdisplay:flex;をつけましょう。
さて、それでは早速あなた自身でも、
flexを使っての横並びを試してみましょう。
やり方は簡単です。
親要素を作り、親要素にdisplay:flex;
と書くだけです。
これをやってあなたのコーディングスキルを、
レベルアップさせましょう。
それでは、読んでもらってありがとうございました。
チャーさん
