くらげだらけスマートフォン用の表示で見るくらげだらけこの広告は、90日以上更新していないブログに表示しています。Moduleで均等幅にレイアウトする最近ではベンダープレフィックスも無くす方向に向かっているようですね。数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。boxは便利なプロパティですが、どんな感じにするのがいいのかを書いてみようと思います。box」でやってみます。1;}この場合すべての子要素が同じ横幅にはなりません。box-flexプロパティは子要素を並べた時に余った領域を分配する比率を指定するものです。auto」で、この場合はそれぞれのコンテンツ幅にあった横幅になると考えます。余ったスペースを均等に分けるので次のようなイメージですね。これをきちんと均等幅にするにはwidthを指定すると良いです。100%」とするとすべての子要素が同じ100%の横幅になろうとしますが、入りきらないぶんを均等に縮めるように配置されます。1px」のような場合でも、余った領域を均等に分配するのでこのような表示になります。ちなみにFirefoxだと「100%」や「1px」だと意図したレイアウトにならないです。「1000px」といった大きな値を指定すると上手くレイアウトされるのですが。flex」ではFlexibilityを「flex」プロパティで指定するようになっています。http://www.w3.org/TR/css3-flexbox/#flexibilityflexプロパティは「flex-grow」「flex-shrink」「flex-basis」という3つの値が指定できるようになっています。それぞれ子要素の「拡大の比率」「縮小の比率」「基本の幅(width)」を表します。最初の仕様「box」のときは「flex-basis」に当たる値はwidthに該当していたわけですが、最新の「flex」ではその値を指定できるようになっているのですね。子要素にwidthが指定してあったとしても「flex-basis」の値をベースにして伸縮の計算がされることになります。(ちなみにflex-basisにautoを指定することでwidthをベースにすることもできます)flexプロパティは3つの値をそれぞれスペース区切りで指定するか「initial」「auto」「none」あとpositive-numberを指定できます。これらの指定は以下のように解釈されます。0px少し遠回りになりましたが、今回は子要素をすべて均等幅にレイアウトしたいので「flex-basis」にauto以外の値を指定する必要があります。1つか2つか3つ数字を並べれば良いということですね。0;}ということで、以上を試してみたサンプルページを用意しました。initialとnoneは一見同じように見えますが、windowを縮めていくと違いがわかります。support結局どちらを使えばいいのかという話です。現状のブラウザサポート状況は以下のような感じのようです(間違っていたら教えてください)。今回の冒頭のように「モバイルブラウザ環境で」ということであれば、古い「box」の方で実装するのがいいのですかね。Safariの動向も気になるところです。Firefoxは現状の最新版だとdefaultで無効にされているようです。Browserは新しいのと古いバージョンで差があるのできちんと実機で検証できてないです。layoutで中に長いテキストなどを含む幅可変要素のレイアウト久しぶりにcssレイアウトでハマってしまった。Pluginの作り方(初級編)とTipsはてなブログをはじめよう!kudakurageさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。