CSS display:flex
フレックスボックスを覚えよう
関連タイピング
-
htmlやcssのタイピングです。
プレイ回数6965英語長文120秒 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数3495英語長文721打 -
プログラミングでよく使う記号や構文を練習したい人向け
プレイ回数1万長文956打 -
個人で覚えるために作りました。
プレイ回数1940長文792打 -
CSSでよく使うプロパティのタイピング
プレイ回数406英語長文584打 -
html初心者用のタイピングです。
プレイ回数5836短文英字50打 -
CSSの暗記用です
プレイ回数472英語長文742打 -
htmlのタグを入力
プレイ回数117300秒
問題文
ふりがな非表示
ふりがな表示
(ｄｉｓｐｌａｙ：ｆｌｅｘ；)
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の指定