CSS display:flex
フレックスボックスを覚えよう
関連タイピング
-
プログラミングでよく使う記号や構文を練習したい人向け
プレイ回数9786長文956打 -
HTMLタグの入力練習
プレイ回数268英語230打 -
chatGPTに作らせた部分一致検索サイトです。
プレイ回数682長文590打 -
HTMLのタグを打とう!
プレイ回数608短文90秒 -
自分で覚えるためにつくりました
プレイ回数2774190打 -
読み方の勉強です。
プレイ回数3199短文英字171打 -
html初心者用のタイピングです。
プレイ回数5527短文英字50打 -
webクリエイター試験上級までカバー。簡単にしました。
プレイ回数1677長文1085打
問題文
ふりがな非表示
ふりがな表示
(ｄｉｓｐｌａｙ：ｆｌｅｘ；)
display:flex;
(ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ：ｃｏｌｕｍｎ；)
flex-direction
(ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ：ｃｅｎｔｅｒ；)
justify-content 主軸に沿って要素をそろえる
(ｓｐａｃｅ－ｂｅｔｗｅｅｎ ｓｐａｃｅ－ａｒｏｕｎｄ)
stretchが初期設定、均等、1/2
(ａｌｉｇｎ－ｉｔｅｍｓ：ｆｌｅｘ－ｓｔａｒｔ；)
align-items 交差軸に対しての操作
(ｆｌｅｘ－ｗｒａｐ：ｗｒａｐ；)
flex-wrap:wrap 折り返し
(ａｌｉｇｎ－ｃｏｎｔｅｎｔ：ｆｌｅｘ－ｅｎｄ；)
flex-wrap:wrap;の時に要素をそろえる
(ｆｌｅｘ－ｆｌｏｗ：ｒｏｗ ｗｒａｐ；)
flex-directionとwrapの同時指定
(ａｌｉｇｎ－ｓｅｌｆ：ｃｅｎｔｅｒ；)
アイテムごとに交差軸に対する指定
(ｏｒｄｅｒ：１；)
アイテムの順番を指定 order:0;
(ｆｌｅｘ－ｇｒｏｗ：１；)
flex-grow：０； アイテムの余った幅の分配
(ｆｌｅｘ－ｓｈｒｉｎｋ：０；)
アイテムの足りない幅の分配
(ｆｌｅｘ：ａｕｔｏ；)
flex-grow:1; shrink:1; basis:auto;
(ｆｌｅｘ－ｂａｓｉｓ：ａｕｔｏ；)
flex-basis:auto; アイテムのwidthの指定