align-self
flex Item(子要素)の行間位置(交差軸に沿って)を決めるプロパティです。
align-self: flex-start;を指定すると、上揃えになります。
align-self: flex-end;を指定すると、下揃えになります。
align-self: center;を指定すると、中央揃えになります。
order
flex Item(子要素)の順番(主軸に沿って)を決めるプロパティです。
初期値は、order: 0; です。
flex-basis
flex Item(子要素)のサイズ(主軸に沿って)を決めるプロパティです。
flex-basis: auto;では、widthやコンテンツの幅になります。
flex-basis: 200px;では、サイズが上書きされます。
max-width(最大幅)やmin-width(最小幅)で制限されている場合は、上書きされません。
flex-grow
flex Item(子要素)のサイズの拡大(主軸に沿って)するためのプロパティです。
flex:grow:0が初期値で、flex Item(子要素)のサイズです。
flex-grow:1;にすると、flex Container(親要素)の余っている幅が指定した比率で割り当てられて、flex-Item(子要素)のサイズが拡大します。
flex-shrink
flex Item(子要素)のサイズの縮小(主軸に沿って)するためのプロパティです。
flex-grow:1;が初期値で、flex Container(親要素)の足りない幅が指定した比率で割り当てられて、flex-Item(子要素)のサイズが縮小します。
一括指定プロパティ(flex)
flexを使うと、basisi・grow・shrinkを一括して指定することができます。
flex: initial;とすると、初期値が設定され、領域が余っても伸ばさない、領域が足らなかったら縮めるという指定になります。
- flex-grow: 0;
- flex-shrink: 1;
- flex-basis:auto;
flex: auto;とすると、領域が余ったら伸ばす、領域が足らなかったら縮めるという指定になります。
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis:auto;
flex: none;とすると、領域が余っても伸ばさない、領域が足らなくても縮めないという指定になります。
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis:auto;
flex: 1; とすると、領域に合わせて、指定した比率で伸びたり、縮めたりする指定になります。
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis:auto;
コメント