skillup

技術ブログ

デザイン

flexについて

投稿日:

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

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

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

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

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

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

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

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-5ba620 …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …