こんばんわ、松澤です
今年もいつの間にか終わりを迎えようとしています
残りイベントもわずかとなりましたが、頑張って働きましょう(‘_’)
今回はflexboxのざっくりした書き方を紹介します
■メリット
flexの最大のメリットは何といってもレスポンシブと親和性が高いことです
さらにCD量がfloatでかっちり組むより3分の1程度になります
■デメリット
IEで表示が崩れる（やっぱり
ただ、最近ではflexboxを使わないと時代遅れ感が出てきていますので、抵抗のある方もそろそろあきらめて覚えてください
■覚え方
１、このサイトを熟読する
・CSS3 Flexbox の各プロパティの使い方を詳しく解説
終わり〆
というのは冗談で
２、実際に動いているサイトからコピペする
またしても冗談です・・・
まぁなんとも体育会系な感じですが、実際はこれが一番わかりやすいと思っています。
しかし、これでは記事の意味が薄いので参考に例を出しておきます。
HTMLコード
<ul class=”flex01″>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
上記のコードで、最初と最後のliは端に、残りは等間隔で配置したい場合、ulにとりあえず↓のcssを張ります。
※（box-sizing: border-box;前提でliがカラム落ちしない設定）
.flex01 {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
align-items: stretch;
}
これで均等に並びます、主に横並びナビゲーションで結構使うのでお試しください
３、しかしこのままだと大抵IEで崩れるのでliに↓の記述を入れると安全です
.flex01 li {
-webkit-flex-basis: 25%;
flex-basis: 25%;
}
※4等分なので25％
これで完成です、簡単ですね(｀・ω・´)
なお、カラム落ちさせたい場合や中央寄せにしたい場合は１に記述したサイトから該当部分を交換すれば設定できます
さらに注意点としてliにpaddingで隙間をつくろうとするとIEで崩れます
もしliの左右に隙間をつくりたいときはmarginを使ってください
例：
.flex01 li {
-webkit-flex-basis: 23%;
flex-basis: 23%;
margin: 0 1%;
}
こんな感じで（liの子要素にpやspanがあればそちらで設定してもok）
あとは流れで覚えてください（適当
最初はIEに殺意をおぼえますが最初だけだとおもいます(＾ν＾)
では頑張ってください、また次回
