【初心者向け 092】CSS Flexbox, Gridについて
はじめに
今回の記事では、CSS Flexboxのattributeとgrid,scssについて紹介したいと思います。
Flexboxの基礎とSCSSのための基礎セッティングはこちらから参考できます。
CSS Flex box more attribute
align-content
.father{
display: flex;
height: 100vh;
gap:10px;
justify-content: center;
flex-flow: row wrap;
align-items: flex-end;
}
.box{
width: 200px;
height: 200px;
background-color: blueviolet;
color: white;
font-size: 36px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
wrapになっているcontainerの場合、containerの大きさが固定されているため、ブラウザーの横が狭くなる場合、複数行のフレックスボックス(multiline flex container) になります。
現在、意図されていない空白ができました。
このように、wrap のフレックスボックスを整列するためにalign-contentを利用します。
.box{
.
.
justify-content: center;
align-items: center;
align-content: center;
}
また、複数行のフレックスボックスの場合、行と列のgapをそれぞれ調節することもできます。
column-gap:20px;
row-gap: 10px;
justify-content: center;
flex-flow: row wrap;
align-content: center;
}
order
今まで、フレックスボックスのルールとして、整列に関しての命令は親にすることが普通でしたが、実はorderという属性を利用して、子要素に直接命令する方法もあります。
こちらはレスポンシブページを作成することにあったてとても重要な要素です。
3番目のボックスと6番のボックスに異なる色を適用しました。こちらにorderを入れれば、どうなりましょうか？
6番にorder:1 3番にorder:2を入れてみます。
このように、本来6番のボックスが7番目になり、3番のボックスが最後になることが分かります。
これより、orderは子要素の順番に関わる要素であり、defaultのorderは0になることが分かります。
次は6のみ負数を適用してみます。
負数もvalueとして適用することができます。
align-self
cross-axisを基準にし、line上のitemをそれぞれ整列する
属性。
align-selfもorderのように子要素のみ適用されるattributeです。
さきほどのalign-contentとorderを削除し、こちらのようにcssを修正してみます。
.father{
display: flex;
height: 100vh;
column-gap:20px;
row-gap: 10px;
justify-content: center;
flex-flow: row wrap;
align-items: center;
}
//.boxは同じ
.box:first-child{
align-self: flex-start;
}
.box:last-child{
align-self: flex-end;
}
flex-grow
componentの割合をどれぐらいに増やすかを決めるattributeです。pxではなく、割合でサイズを調節することができます。defaultは0です。0はテキストが必要な空間だけのサイズを意味します。
.box:first-child {
background-color: tomato;
flex-grow: 1;
}
.box:nth-child(2){
background-color: teal;
flex-grow: 1;
}
.box:first-child {
background-color: tomato;
flex-grow: 1;
}
.box:nth-child(2){
background-color: teal;
flex-grow: 4;
}
flex-shrink
componentの割合をどれぐらいに減らすかを決めるattributeです。growと同様pxではなく、割合でサイズを調節することができ、defaultは1ですが、違う点があります。
flex-shrinkの場合、減らすサイズだけでなく、数字が高ければ高い方度約まるスピードが速くなり、wrapでは適応されないことです。
.box:first-child {
background-color: tomato;
flex-grow: 1;
flex-shrink: 5;
}
.box:nth-child(2){
background-color: teal;
flex-grow: 2;
flex-shrink: 0; <!--約まらなないです>
}
.box:nth-child(3){
background-color: orange;
flex-grow: 1;
flex-shrink: 2;
}
flex-basis
先ほど、flex-growとflex-shrinkはwidthがないと説明しましたが、より正確にはwidthを指定することができます。より詳しく説明しますと、flex-directionによるmain-axixに沿っての初期の長さを決定することができます。
その初期値を決めるattributeがflex-basisです。
.box:first-child {
background-color: tomato;
flex-grow: 0;
flex-basis: 500px;
}
.box:nth-child(2){
background-color: teal;
flex-grow: 0;
}
こちらにflex-growを1与えますと先ほどのflex-growから説明した割合とは異なることが分かります。一つは500pxが初期値で、一つは394px(default）からブラウザーを埋めたからです。
.box:first-child {
background-color: tomato;
flex-grow: 0;
flex-basis: 500px;
}
flex
.box:first-child {
background-color: tomato;
flex-grow: 1;
flex-basis: 500px;
flex-shrink: 0;
}
.box:nth-child(2){
background-color: teal;
flex-grow: 1;
}
このように、flex-growとflex-shrinkを当時に適用することもできます。この場合、500px
から望むところまで伸びることができ、減らす際には500px未満には減りません。
min-width(flex-directionがcolumnならmin-height)になります。
flex-grow, flex-shrink, flex-basisはこのように表現することもできます。
.box:first-child {
background-color: tomato;
flex:1 0 500px;
}
.box:nth-child(2){
background-color: teal;
flex-grow: 1;
}
逆に、flex-growが0で、flex-shrinkが陽数になる場合、flex-basisはmax-width(max-height)になります。減らした場合は以下のコードの場合,widthが394pxまで減ることが分かりました。
flex:0 5 500pxに表現することも可能です。
.box:first-child {
background-color: tomato;
flex-grow: 0;
flex-basis: 500px;
flex-shrink: 5;
}
.box:nth-child(2){
background-color: teal;
flex-grow: 1;
}
Grid
flexboxは1次元レイアウトとして、main-axisもしくはcross-axisという一つのlineを中心に整列したり、レイアウトを作成できますが、gridは2次元レイアウトとして行列、つまり横と縦を同時にコントロールし、ページ全体のレイアウトを組むことができます。
flexboxより、その分様々なpropertyがありますが、皆さんに紹介したいと思います。
grid-template-columns, grid-template-rows
.father{
grid-template-columns: 100px;
}
grid-template-columnsは一つのcolumnのwidthを指定します。
.father{
grid-template-rows: 100px;
}
grid-template-rowsは一つのrowのheightを指定します。
.father{
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 200px 100px;
gap: 10px;
}
複数で、分けることもできます。
grid Lines
全てのグリッドにはhorizontal lineとvertical lineがあります。
現在、vertical lineは1~4, horizontal lineは1～3まであります。最後のラインは -1で表現することもできます。
horizontal 2, vertical 1 lineにある4番itemを真ん中に運びたい時はvertical lineを変更し、終わる支店を設定すれば終わりです。
verticalになるので、column系を活用すれば、良いかなみたいな感覚でオッケーです！
.child:last-child{
background-color: midnightblue;
grid-column-start: 2;
}
.child:first-child{
background-color: green;
grid-row-start: 1;
grid-row-end:-1;
}
.father{
display: grid;
grid-template-columns: [pig]100px [cow]200px [chicken]50px[lamb];
grid-template-rows: [pizza]200px [chicken]100px[sausage];
gap: 10px;
}
以下のようにlineに名前を付けることもでき、lineのnumber変わりにline nameでgrid itemsの
大きさを調節することも可能です。
start,endが含まれた表現としてこのような表現も可能です。
grid-row-start:1
grid-row-end:-1
grid-row: 1 / -1
fr
body {
padding: 0;
margin: 0;
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
frという属性で,flex-grow, flex-shrink, flex-basisのように、割合を調節することができます。
grid-template-area, grid-area
先ほどのfrの延長で3ｘ4グリッドを作成してみます。
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
先ほどは、lineを通して調整したのですが、より簡単な方法があります。16個のセルを区切り、指定することです。
こちらは直接見た方が分かりやすいと思います。
grid-template-areasでまず区切ります。
grid-template-areas:
"header header header header"
"aside section section section"
"aside section section section"
"footer footer footer footer";
その後、親予想にgrid-areaを指定します。
header {
background-color: aqua;
grid-area:header;
}
簡単に完成できました。すごいですね！
grid-template
grid-template:"a a a a" 1fr
"c b b b" 2fr
"d d d d" 1fr / 1fr 1fr 1fr 1fr
先ほどは、grid-template-rows, grid-template-columns,grid-template-areaを使わずに、
こんなに簡単にレイアウトを組むこともできます。
span
tableのcolspan, rowspanのようにspanを通して、セルを簡単に合わせることもできます。
div:nth-child(4){
background-color: green;
grid-column: span 3;
}
Discussion