【ワテの備忘録】結局 display:flex だけで十分なのかな。

この記事は約5分で読めます。
スポンサーリンク

昨日、こんな記事を書いた。

【ワテの備忘録】cssのclearfixやdisplay:flex, display:inline-flexの使い方
ワテの場合、手作業でhtmlを記述しながらWEBサイトの作成を始めて約10ヶ月くらい経った。 最初の頃のワテは、プログラミングに関しては、C, C++, C#, VB.NET など有る程度のプログラミング言語は使う事が出来たのだが、WEB...

その続き。

では、本題に入ろう。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

display:flexを使って要素を横並びにする

WEBサイト作りに於いては、htmlファイルの中に出て来る<div>, <p>, <input> その他の各種の要素を横並びにしたいとか、ウインドウ幅に応じて所定の位置に配置したいとか、いろんな要望が出て来る。

ワテの場合、最初に覚えた手法が、cssファイルのstyle設定において、

float:left;

を指定して横並びにする方法だ。

一方、それを解除するのが、

<div class="clearfix"></div>

だ。

これらをずっと使ってきたのだが、昨日調べたところ、最近では横並びにするにはfloatではなくて、display:なんちゃら の指定でやるのが流行らしい。

その中でも良く使われるのが、以下のものらしいが、

display: inline-block;
display: inline-flex;
display: flexbox;
display: flex;

こんなにあると、どれを使って良いか迷う。

 

で、ググッてみたらStackOverflowに良い回答を見つけた。

 

CSS3 Flexbox: display: box vs. flexbox vs. flex

英語なので詳しくは理解出来ないのだが、一部引用させて頂くと、

These are different styles.
display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

う~ん、つまり、このあたりの仕様は毎年のように変化しているようだ。

なので、この回答が投稿された Answered Apr 29 ’13 at 13:38 の時点では、

display: flex;

が標準的らしい(ワテの理解なので間違っているかも)。

と言う事で、ワテの場合は、今後は要素を横並びの配置にしたい場合には、display:flex; を使う予定だ。

実際に使ってみると、とても便利。

親コンテナのdivにこの属性を指定しているだけで、その中の要素が自動的に横並びになってくれる。

display:flex; を使う例

例えば、以下のCSSとhtmlを表示すると、

<style>
     .flexClass {
         display: flex;
         border: 5px solid yellowgreen;
         -ms-word-break: break-all;
         word-break: break-all;
     }
 
     #testID > div > p:nth-child(even) {
         text-align: center;
         border: 5px solid #00ffff;
     }
 
     #testID > div > p:nth-child(odd) {
         text-align: center;
         border: 5px solid #ff6a00;
     }
 </style>
    <div id="testID">
        <div class="flexClass">
            <p>日曜日</p>
            <p>月曜日</p>
            <p>火曜日</p>
            <p>水曜日</p>
            <p>木曜日</p>
            <p>金曜日</p>
            <p>土曜日</p>
        </div>
        <div class="flexClass">
            <p>Sunday</p>
            <p>Monday</p>
            <p>Tuesday</p>
            <p>Wednesday</p>
            <p>Thursday</p>
            <p>Friday</p>
            <p>Saturday</p>
        </div>
    </div>

こんな風に、簡単に横並びに出来た。

 

日曜日

月曜日

火曜日

水曜日

木曜日

金曜日

土曜日

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

解除するための clearfix も不要だ。

これは便利。

 

ここで説明した手法の応用記事

【ワテの備忘録】CSSだけでHTMLのdiv要素を段組みにする【簡単】

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

CSSHTML
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント