タグ

flexboxに関するntaooのブックマーク (8)

  • A Visual Guide to CSS3 Flexbox Properties | DigitalOcean

    Introduction The Flexbox Layout officially called CSS Flexible Box Layout Module is a new layout module in CSS3 made to improve the alignment, directions, and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on

    A Visual Guide to CSS3 Flexbox Properties | DigitalOcean
  • 3つだけ覚える「flexbox」の使い方 - Qiita

    3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ(最下部に吸い付くフッタ) この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき3つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で

    3つだけ覚える「flexbox」の使い方 - Qiita
  • Flexplorer

    Well this is embarrassing... You're currently on a web browser that does not support the most recent version of the CSS Flexible Box Model. Upgrade your browser and have a nice day! Supports latest version of Flexbox unprefixed: Safari 7+ Internet Explorer 11 Chrome 29+ Opera 12.1 Supports latest version of Flexbox prefixed: Safari 6.1+ prefixed Chrome 21+ Support for latest vesion of Flexbox comi

  • Alastairc - Buy Cheap Instagram Followers

    Get More Instagram Followers, Likes and Video Views! Buy Instagram Followers to go viral, popular and onto the explore feed! Whenever your Instagram profile has more followers, users will perceive you as someone who has a great community following your account. Get Instagram followers instantly delivered to you today, all high quality and cheap!

    Alastairc - Buy Cheap Instagram Followers
  • ゆめいろデザイン|ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ

    今年はできるだけ、「Internet Explorer 9」を窓から投げ捨てる(=サポートを切る)案件を増やしていく予定です。 このサイトもflexboxを使うコードに移行しました。それ以外にも、flexboxをいくつかの案件で使ってみました。そこで得られたノウハウをちょこっとだけシェアさせていただこうと思います。作り方は今回は記載しないのであしからず。 Firefoxで最初に検証しながら制作するのには理由があります。 ちょっと複雑なことをやろうとすると、Firefoxさんだけお行儀が悪くなります。Internet Explorer 10よりもお行儀が悪いです。 同じものをつくるにしても、Firefoxだけできない、できても複雑なコードになることが多くなります。 Firefoxさんにがんばってもらうためのコードを記載しても、ChromeやSafari・Internet Explorerで表

    ゆめいろデザイン|ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
    ntaoo
    ntaoo 2014/09/04
    Flexboxまじ最高ですよ。あとは互換性を気にする必要がなくなればどれだけCSSのレイアウティングが楽になるか。
  • CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム

    どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案(Editor’s Draft)を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案(Last Call Working Draft)が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

    CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
    ntaoo
    ntaoo 2014/06/27
    Flexboxはもう使っても大丈夫なのだろうか。Safariの対応が心配。
  • CSS Flexbox Layout Guide | CSS-Tricks

    Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to su

    CSS Flexbox Layout Guide | CSS-Tricks
  • Solved By Flexbox — Cleaner, hack-free CSS

    IntroductionCSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity. Finally, thanks to Flexbox, we have a solution. This site is not another CSS framework. Instead, its purpo

    Solved By Flexbox — Cleaner, hack-free CSS
  • 1