skillup

技術ブログ

デザイン

flexについて

投稿日:

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

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

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

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

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

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

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

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

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

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