Well this is embarrassing... You're currently on a web browser that does not support the most recent version of the CSS Flexible Box Model. Upgrade your browser and have a nice day! Supports latest version of Flexbox unprefixed: Safari 7+ Internet Explorer 11 Chrome 29+ Opera 12.1 Supports latest version of Flexbox prefixed: Safari 6.1+ prefixed Chrome 21+ Support for latest vesion of Flexbox comi
かゆいところに手が届く！Flexboxを使った便利な小技要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt="" /> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div> <div class="box"> <img src="images/iphone2.jpg" alt="" /> <div class="box-text"> <h2>見出しが入
普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイアウトを作成する時に役立つ、Flexboxのプロパティがどのように収縮して機能するかアニメーションで分かりやすく解説します。 Even more about how Flexbox works — explained in big, colorful, animated gifs 前編（翻訳版: Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説）では、主にコンテナ要素に適用されるプロパティを解説しました。今回は子要素に適用されるサイズ変更のプロパティについて解説します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイ
CSS Flexboxで何ができるのか、どういうことができるのか、基礎知識をはじめ、グリッドやレイアウトに使える実装コードやコンポーネントの実装コードなど、Flexboxの実装に役立つコンテンツをまとめて紹介します。
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
2016年1月12日にIEの古いバージョンのサポートが終了して半年が過ぎ、IEの対象バージョンをIE11とEdgeに、そしてFlexboxの導入をしている制作者も多いと思います。 Flexboxを使って、最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートやフレームワークを紹介します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>サンプル</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>Header</h1> </div> <div id="content"> <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> </div> <div id="side-menu"> <ul> <li><a href="">side-link1</a></li> <li><a
flexboxについての続編です。 flex-growやflex-shrinkの設定方法でちょっとつまったので、今回もサンプルをいくつか用意してみました。 flex-basis 基準となる幅を指定できます。 親要素に対して小さい値を設定すると隙間はできますが、大きい値を入れても突き破ることはないです。 2段などにさせたい場合はflex-wrap: wrap;を指定すればいいのですが、その場合2段目以降は100%より小さくても親要素にぴっちりなります。 See the Pen GJBJdM by matsui (@matsui) on CodePen. flex-grow フレックスアイテムがフレックスコンテナ内で、余裕がある場合どれだけ大きくなるかの割合を指定できます。 See the Pen aOjyKR by apct (@apct) on CodePen. flex-shrink フ
flexboxプロパティってとても便利ですよね。 便利だなーと思うのですが、毎回使い方を忘れて使うたびにググってます…。 いい加減覚えよう！といういましめエントリーです。 フレックスレイアウト 今までレイアウトには ブロックレイアウト インラインレイアウト テーブルレイアウト 配置レイアウト がありましたが、フレックスレイアウトという、新しいレイアウトモードが誕生しました。 近年、アプリやWEBページが複雑なレイアウトをする傾向から、CSS3で新しく誕生したレイアウトモードです。 どういうときに使うの？ 要素を左右上下と整列させたいとき 横並び要素の高さをそろえたいとき 要素を好きな順序に並び替えたいとき などなど、用途は様々です。 例えばこういう配置で高さを揃えたいときとか… sectionの後はh1を置きたいけど、上に画像がいるなーというときとか… See the Pen doejQa
CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。 「Flexbox Patterns」は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。 詳しくは以下 上記のようにCSSとHTMLがコピーできる形でまとめられているため、技術者でなくてもパーツだけなら簡単に組み込むことが可能です。 現在は実用的なものから、なかなかニッチなものまで全部で10のユーザーインターフェイスが登録されています。シンプ
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
Flexbox PatternsBuild awesome user interfaces with CSS flexbox. Examples and source code included. Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end. You can start using these patterns in your own code right away,
イントロダクションCSSには長らく適切なレイアウトメカニズムが不足していました。トランジション、アニメーション、フィルタ、これらはすべて素晴らしくて有用な言語への追加機能ですが、しかしWeb開発者が不満だった、永遠に続くようにも思われた主要な問題に対処するものではありませんでした。 Flexboxに感謝します。ついに我々は解決方法を手に入れました。 このサイトはCSSフレームワークではありません。その代わり、CSSだけでは解決するのが難しい、あるいは不可能だった問題が、今やFlexboxでとても簡単になった事例のショーケースとなることが、このサイトの趣旨です。また、Internet Explorer 11の最近のリリースとSafari 6.1により、今やすべてのモダンブラウザがFlexboxの最新仕様に対応しています。 以下のデモをご覧ください。Webインスペクタでスタイルを眺めるか、また
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
