レスポンシブWebデザイン（RWD）で使うと便利なCSSプロパティを紹介します．一般に，display: none;やwidth: 100%;は非常に使います．ここに挙げる5つのプロパティを知るだけで，設計・表現の幅が広がります．
１．flex-direction
　display: flex;とした要素の並ぶ向きを変更するプロパティ．横に並んでいるメニューやアイコン群を，縦に並べたいときに使います．display: flex;で左にある要素を，flex-direction: column;とすると上に持っていけます．逆に，display: flex;で左にある要素を下から並べたいときも大丈夫，flex-direction: column-reverse;で実現できます．
２．min-width / min-height
　横幅がPCに比べ狭い端末では，widthを%やvwで指定しているとき，横に縮みすぎることがあります．この要素は少なくとも200pxくらい横幅は欲しい… との願いが，min-widthで実現できます．どんなに横幅が狭くても，widthの最小値を決められます．heightも同様に，少なくとも350pxは欲しいとき，min-height: 350px;とします．RWDとはいえpxを使う機会も多いものです．
３．overflow
　スマホで横揺れ．RWDで最も恰好悪い実装です．文字列や写真のサイズが大きいとき，縦にスクロールできるが横にはスクロールできなくしたい．そのときに，overflow: hidden;を使いスクロールできなくします．また，コンテンツが長くなったときだけスクロールバーを出すには，overflow: auto;と書きます．横方向のみスクロールを止めるには，overflow-x: hidden;です．
４．word-wrap / word-break
　英語の文字列にハイフンやスラッシュをスペースを含めず書くと，改行がなされず文字列が横へ出てしまいます．また，スマホサイズで長い文字列が横のサイズに収まらないと，横揺れの原因になります．word-wrap: wrap;として単語単位で改行するか，word-break: break-word;で強制的に改行させます．例えばtext-align: left; width: 80%;と組み合わせれば，右に作ったエリアと重なりません．
５．position
　スマホでスクロールしても出現位置を固定するとき，position: fixed;を使います．どんなにスクロールしても左上にアイコンをくっつけておきたい，下にメニューバーを表示させたい．position: fixed;にtop: 0; left: 0;やbottom: 0;を組み合わせます．しかし，くっつけずにスクロールに連動させたくなったら… 簡単です．position: absolute;に書き換えるだけです．