CSS display:flex
フレックスボックスを覚えよう
関連タイピング
-
自作のハンバーガーメニューを作成しましょう！
プレイ回数3388英語長文721打 -
htmlのタグを入力
プレイ回数56300秒 -
htmlの雛形覚え用
プレイ回数614英語長文258打 -
記号の練習
プレイ回数538英語60秒 -
HTMLのタグを打とう!
プレイ回数778短文90秒 -
基礎的なHTML
プレイ回数3410英語54打 -
プログラミングでよく使う記号や構文を練習したい人向け
プレイ回数1万長文956打 -
HTML5の
プレイ回数466長文405打
問題文
ふりがな非表示
ふりがな表示
(ｄｉｓｐｌａｙ：ｆｌｅｘ；)
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の指定