IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
2015年10月度のflexboxの書き方 - Web Design Note
2015-10-31 2015年10月度のflexboxの書き方 CSS3 １年ぶりに業務でコーディング・・・が、早速つまずく。「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの？」ってことで、flexboxの書き方を調べました。 ブラウザのサポート状況などから まずは、先にやってくれてる人がいないかネット検索。比較的新しめの記事がこちらでした。 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】 コリスでは各プロパティを図で詳しく説明してくれています。 CSS3 Flex
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】
【参考ソース】 .foo { display:-webkit-box;/*--- Androidブラウザ用 ---*/ display:-ms-flexbox;/*--- IE10 ---*/ display: -webkit-flex;/*--- safari（PC）用 ---*/ display:flex; -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/ -ms-flex-pack:justify;/*--- IE10 ---*/ -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/ justify-content:space-between; } 【解説】 ２～５行目 Flexboxを作るための指定です。 ６～９行目 左からflexアイテムを並べて余白があれば、そ
CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
