skillup

技術ブログ

デザイン

flexについて

投稿日:

CSSのflexをちょこちょこ使ってます。

以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。

css flexbxについてどんなことができるのか

使って思ったのはやっぱすげー便利ですね。まだほんのちょこっとしか使ってないですけど。

とくに等間隔で要素を配置したいときに役立ちます。

気を付けるべきことなど。

基本親要素のみに設定する

えー一番最初になれるまではこれがようわかりませんでした。基本親要素に指定しておけば子要素に何もする必要ないです。

あとは下記のようなわかりやすいチートシートを何度も見て体で動けるようになっておきましょう。

あとはつぶれそうなときなどは子要素にmin-widthなど設定して、最小限の幅を作っておけば大丈夫かと。

もうちょい慣れて早く使い始めるべきでしたね・・・・

日本語対応!CSS Flexboxのチートシートを作ったので配布します

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …