CSS display:flex
フレックスボックスを覚えよう
関連タイピング
-
プレイ回数99 英字169打 -
htmlの要素を覚えるの打
プレイ回数1538 短文英字193打 -
HTML特殊文字
プレイ回数921 120秒 -
基礎的なHTML
プレイ回数4522 英語54打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数4462 英語長文721打 -
htmlのタグを入力
プレイ回数506 300秒 -
html5の単語での基礎練習
プレイ回数5883 短文英字339打 -
html5暗記用 <>を省いています
プレイ回数1113 英語長文1245打
問題文
ふりがな非表示
ふりがな表示
(ｄｉｓｐｌａｙ：ｆｌｅｘ；)
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の指定