CSS

フレックスボックスのアイテムは、「order」を使って順番を自由に入替えられます。これは結構便利かも。レイアウトの自由度が増しますね。 例：下記のように、配置したとして・・・ 1 2 3 4 5 6 7 8 9 10 11 各アイテムに下記...

スマホのブラウザはFlexboxへの対応が一番遅れていたようですが、現在はだいたい対応しているようですね。 なので、ここでは非対応ブラウザへ対応させるという話ではなく、レスポンシブデザインにしてみる実験。 スマホに対応せるには、メディアクエ...

Flexboxはまだ新しい規格なので、ブラウザによって対応状況が異なっているようですね。 最新のブラウザを使ってればそれほど酷く崩れることは無いと思いますが、例によってマイクロソフトは独自路線を行く傾向は相変わらずで、IEだと問題が起きやす...

「flex-direction」は並び方を横に並ばせるか縦にならばせるかを指定する。 「flex-direction:row;」だと横並び（左から右へ） 「flex-direction:column;」だと縦並び（上から下へ） 例１　row...

フレックスボックスを使ったタイル状のインデックスページ、改訂版 幅を変えて段組みを簡単に変更できます。 また、order の設定でタイルブロックの配置を自由に変えられるので、レイアウト変更が簡単にできてよいですね。 これ、２カラム・３カラム...

Flexboxレイアウトで、３カラムデザインなのだけど、タイル状配置を利用したレイアウトを考えてみた。 （こういうタイル状レイアウトを「グリッドレイアウト」っていうらしい） TITLE TEST1 Lorem ipsum dolor sit...

２カラム・３カラムのレイアウトを作ってみる。（※初めてやったので参考程度にお願いします。） ２カラム TITLE カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ 本文 ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊...

フレックスボックスは左右・中央寄せがとても簡単 これ、理解したらとても便利だと思いました。 ん？中央寄せなんて「text-align:center;」で済む話では？ と思うかも知れませんが、縦方向の中央寄せは難しいですよね。 縦位置の中央寄...

フレックスボックスの、子アイテムのスタイルでは、ショートハンドとして、このような書き方が推奨されているとか。 flex:＜因数1＞ ＜因数2＞ ＜因数3＞; これは何を意味しているかというと 因数1 ⇒ flex-grow:＜数値＞; 因数...

フレックスボックスは、中に数が定まっていない複数のアイテムが詰め込まれるような状況が得意ということですかね。（うまくレイアウトを調整して埋めてくれるような感じ） #main .smpl1{ width:300px; border:2px s...

★フレックスボックスとは？ フレックスボックスを使うと、従来のFLOATなどを使ったレイアウトより、少しだけ自由度が高い配置ができる。 ※フレックスボックスを使うと、FloatをかけてあとでClearするための空の領域を作ったりする必要がな...

今更ですが、float解除の３つの方法、覚書 flaotを使って回り込みをした場合、floatを解除してやらないと、思わぬところでレイアウトが崩れる場合がありますね。(親要素の中にある子要素にfloatプロパティが設定されていると、内容をも...