CSS display:flex

フレックスボックスを覚えよう
関連タイピング
-
自作のハンバーガーメニューを作成しましょう!
プレイ回数3250英語長文721打 -
基礎的なHTML
プレイ回数3304英語54打 -
htmlの雛形覚え用
プレイ回数508英語長文258打 -
CSSでよく使うプロパティのタイピング
プレイ回数343英語長文584打 -
プログラミングでよく使う記号や構文を練習したい人向け
プレイ回数1万長文956打 -
Vue.js 3 Transition 自分暗記用
プレイ回数214英語長文364打 -
css暗記用 テキストの配置・改行・行の高さ装飾などの指定
プレイ回数423英語長文943打 -
記号の練習
プレイ回数535英語60秒
問題文
ふりがな非表示
ふりがな表示
(display:flex;)
display:flex;
(flex-direction:column;)
flex-direction
(justify-content:center;)
justify-content 主軸に沿って要素をそろえる
(space-between space-around)
stretchが初期設定、均等、1/2
(align-items:flex-start;)
align-items 交差軸に対しての操作
(flex-wrap:wrap;)
flex-wrap:wrap 折り返し
(align-content:flex-end;)
flex-wrap:wrap;の時に要素をそろえる
(flex-flow:row wrap;)
flex-directionとwrapの同時指定
(align-self:center;)
アイテムごとに交差軸に対する指定
(order:1;)
アイテムの順番を指定 order:0;
(flex-grow:1;)
flex-grow:0; アイテムの余った幅の分配
(flex-shrink:0;)
アイテムの足りない幅の分配
(flex:auto;)
flex-grow:1; shrink:1; basis:auto;
(flex-basis:auto;)
flex-basis:auto; アイテムのwidthの指定