css初心者備忘録・1回・flex
flex
flexとはdisplayプロパティのプロパティ値(value)の事。
俺の解釈。
プロパティは親コマンド！そのコマンドの細かなコマンド指定がプロパティ値と解釈する。
ま、表示(display)をflex(value)でしろや！。ってことだ。
flex で躓くのは結局の所、配置が思った通りにできない！被ってる！だけだろうから、思った通りに配置できるように練習してみた。
この通り書いたhtml要素で、思った配置方法で出来るかを練習する。
bodyの幅は１２００ｐｘ。
ちなみにリセットCSSは指定していない。
div要素それぞれのクラスに色を付ける。
現在のクラス一覧は【no】、【flex】,そして【no以降の各数字】
それぞれに個別の色をつける。
がimg1です。ここから始めたいと思います。
１．横並び
display: flex;で綺麗に均等に並ぶ。しかしflexは均等に横並びにする。というvalueでは無い。あくまでも要素をブロックレベルのコンテナで【display】するだけのプロパティ値であるので、上のimg2のように均等にするにはbodyに指定したwidth値をブロック個数で割り、div要素すべてに適応するために
画像css1の .no{ に指定する。
２．縦並び
縦並びにするにはプロパティflex-direction:(value)を宣言する。
valueはcolumn。
しかし、クラスflexの背景色が浮き彫りになった。これで、divをまとめたクラスflexがbody幅1200pxと、noに指定したheight値（200×5div）pxになっている。という事が分かる。このflexクラスのボックス(背景水色)を
noクラス分の幅にしたい。ので方法を考える。
1つはクラス【flex】にwidthを与え２４０px、つまりdiv要素に指定したwidth値にする。
２つ目はクラスflexを削除する。つまりdiv要素を６つから５つにする。
これでimg4のようになる。
3．個数を分ける。
＊リセットｃｓｓを指定しました。結果が変わる可能性があります。
img4の状態からこの5つを横に分けたい。
まずクラスflexにwidth: とheight:を指定する。
このdiv群を横に分けたい。横に分けるにはflex-wrap: wrap;を使った。
だが変化が無い。なので.flex｛heightを820pxに変更した。
結果はこうなった。つまりflex-wrap: wrap;はクラスflex内で主軸(この場合、columnで縦軸）に沿ってはみ出た要素を分けるということが分かった。それぞれの要素は200pxだがボーダー1px分のサイズが加算されているため,
height:800pxにすると水色ボックス縦、丁度には収まらず３，２で別れる。
img6のままだとボックス間の隙間が気になる。
なので.flex｛width:486px: height:608px｝に。
margin：はスナップショットを撮る時にウィンドウが邪魔になっていたので追記した。因みに上から時計回りにvalueを指定することが出来る。
これで個数を分け、そしてきれいに整理するには大本である.flexのサイズで調整する事が出来る。
横並びでも同じようにする事ができる。その場合はcolumnをrowに。そして.flex幅を調整する。
しかし黄色ボックス（正確ではない）と水色ボックスの間に微妙な隙間ができてしまう。1px以下の小さな隙間が出来てしまった。そこでpadding 1pxを指定してみたらその隙間事態に変化がなく上左下に同じ隙間が出来た。
全てのボーダーを削除し、flex幅720pxにすると下のように隙間なく配置することが出来る。つまりシステム上のバグ、不具合なのだろうか。。
4．順序を指定する。
分かりやすいようにフォントサイズを50pxに変更しそれぞれに番号を付けた。それぞれのボックスを任意の順にするにはorder：〇；で指定することができる。それぞれの要素全てに指定しないと、指定していない場所に移動してしまう点に注意。
これで順番を指定し配置することができた。