CSS display:flex
フレックスボックスを覚えよう
関連タイピング
-
CSS2
プレイ回数563 長文英字2051打 -
webクリエイター試験上級までカバー
プレイ回数3664 長文2136打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数4443 英語長文721打 -
htmlの雛形覚え用
プレイ回数1275 英語長文258打 -
自分用transform まとめ
プレイ回数1130 長文英字693打 -
プレイ回数1636 60秒 -
読み方の勉強です。
プレイ回数3872 短文英字171打 -
基礎的なHTML
プレイ回数4506 英語54打
問題文
ふりがな非表示
ふりがな表示
(ｄｉｓｐｌａｙ：ｆｌｅｘ；)
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の指定