CSSハマったまとめ（小要素の並び替え・テキスト回り込み防止・センタリング）

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

CSSで中央寄せする9つの方法（縦・横にセンタリング）

CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

リストを横並びにしたい、でもスマホでは縦にしたい。

ということでcolumnを使いました。横並びはrowでなんとかなりそう…

{
    display:flex;
    flex-direction:column;
}

横並びで均等に配置もしたのでこちらも。

{
     display: flex;
     justify-content: space-between;
}

画像とテキストが混在するスペースで
テキストが画像に回り込むのを防ぐ

HTML

<div id="sample">
   <img src="sample.jpg">
   <p>サンプルテキスト...</p>
</div>

CSS

 #sample  img {
   float: left;
   margin-right: 10px;
} #sample  p {
   overflow: auto;
}

画像やボタンをセンタリング

基本的にはmarginで解決しました。

{
    margin:0 auto;
}

以上、自分用メモでした。
いちいちHTMLにstyleで打ち込まずにCSSで解決しなってことだ。

gridも使いこなせるようになりてぇなぁ…  :)