昨日、こんな記事を書いた。
その続き。
では、本題に入ろう。
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 も不要だ。
これは便利。
コメント