ウェブページを柔軟にレイアウトできるCSS flexの書き方と活用方法を解説。displayプロパティに値flexを指定した上でflex-directionプロパティを併用すれば、横並び・縦並び・正順・逆順などCSSだけで表示順序を自在に指定できます。さらにorderプロパティを併用 ...

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再 ...

学校のお友達が、なにげにflex-direction: row; とflex-direction:row reverse;は使えると教えてくれたのでシェアします。CODEPENという文字の所をダブルクリックして見てみてください。 .wrapper:nth-of-type(even)の even は、偶数という意味です。 なので、偶数は row-reverseで ...