【初心者】CSS 復習／Flexbox【備忘録６】

10/20～10/21での復習

上級編の実践練習

• ＠media(max-width:1000px ){　　～～　 }
  　上記のように書く際に、;を付けてしまったのが何度かあったので今のうちから変な癖がつかないように気を付ける。

• ページを作成する際に＜.top-wrapper＞や＜main-wrapper＞などで部分分けをしているが、＜.top-wrapper＞の＜btn＞部分だけ、幅を変更したいなどの場合の書き方を今まで認識していなかった。使用するタイミングがあるかと思うのでしっかり漏れなく覚えておく。

[ex]⇒.top-wrapper .btn{width:100%}

10/21～10/23で勉強したこと

Flexbox

• まずは基本的に使用しそうな物のみ勉強。
• レスポンシブデザインで行ったような、タブレット／スマホでのアイコンの表示分けの際に簡単に書くことができるようなので、使いこなせるようにしていきたい。
• 基本的には親要素に⇒display:flex;　／　幅を伸ばしたい要素に⇒flex:auto;
• 折り返しで並べたい場合は親要素に追記で⇒flex-wrap:wrap;　／　折り返したい要素に⇒width:50%;
• スマホ表記などで１列表記にする場合親要素に⇒flex-direction:column;＜つづり注意！＞
  　１列で表したい要素に⇒margin:0 auto;　でしっかり中央寄せに調整する。

ふりかえり

• AtomをインストールしたのでGoogleで表示させながら何度か自分でオリジナルでページ作成を試していきたい。もう１つ、GitHubにも登録したのでページの使い方など触って慣れていこうと思う。