skillup

技術ブログ

デザイン

flexについて

投稿日:

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

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

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

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

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

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

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

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素1.2.1 参考リンク2 レ …

no image

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

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

no image

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

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