30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS Flexbox編終了【30DAYSトライアル】

30DAYSトライアル

Flexboxを学ぶために再びProgateに課金しました(笑)。
Flexboxを使うと今までfloatで横並びしていたのがもっと楽に定義できるみたいです!
今はFlexboxの方が主流みたいですね。

Flexboxの特徴

以下のHTMLを例にFlexboxの特徴を見ていきます!

【HTML例】
<ul class="test-list"> ←親要素
<li class="li1">item1</li> ←子要素
<li class="li2">item2</li>
<li class="li3">item3</li>
<li class="li4">item4</li>
</ul>

【Flexbox】要素を横並びにしたいとき【display:flex;】

要素を横並びにしたいときは『display:flex;』親要素に指定します。

【CSS】
.test-list {

display: flex;

でも横並びにするだけじゃ要素が左寄せにぎゅっとなっちゃってるから、flex: auto;で要素を伸ばします!
こちらは子要素に対して指定します。

【CSS】
.test-list li{                

test: auto;

【Flexbox】要素を折り返して2列表示にしたいとき【flex-wrap:wrap;】

要素を折り返したいときは『flex-wrap:wrap;』を親要素に指定すると子要素で指定した割合に応じて要素を折り返します。

【CSS】
.test-list {

display:flex;
flex-wrap:wrap;}
.test-list li{
test:auto;
/* 2列表示にしたいので50%で指定 */
width:50%;

ココに注意


親要素でflex-wrap : wrap;を指定するだけじゃダメ。
ちゃんとwidthでどのぐらいの割合で表示させるのかを指定すること!

【Flexbox】要素を縦並びにしたいとき【flex-direction:column;】

左から右へ並んでいる横並びの要素を上から下へ縦並びに並べるには『flex-direction:column;』を親要素に指定します。
レスポンシブ対応させたい時に使うと良き!

【CSS】
.test-list {
flex-direction:column;

学び直したこと~レスポンシブ対応~

メディアクエリのやり方すっかり忘れてしまっていました。。。

@media (max-width: 数値px) {
max-width ⇒ 指定した数値までスタイルが適用される。
min-width ⇒ 指定した数値以上がスタイル適用される。

あと、以下のように定義している場合

/* タブレット向けレイアウト */
@media (max-width: 1000px) {
.flex-list li {
width: 50%;
}
/* スマホ向けレイアウト */
@media (max-width : 670px) {

『width:50%』はスマホ向けにも適用されるということ!
(1000px以下なので!)

 

-30DAYSトライアル, お勉強
-, ,

© 2021 文系女子とプログラミング