記事内に広告が含まれています

【ワテの備忘録】結局 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要素を段組みにする【簡単】

スポンサーリンク
コメント募集

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

CSS, SCSSHTML
スポンサーリンク
シェアする
warekoをフォローする
スポンサーリンク

コメント