skillup

技術ブログ

デザイン

flexについて

投稿日:

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

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

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

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

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

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

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

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

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

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

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …