おしゃれなライオンのように、先端学校2期13 Day

📖 今日の勉強内容

1. flex

2. grid

1. flex

1). flex-growは、flexアイテムの余白パーセントを決定できる属性です.左上隅の最初の画像の「Good job」項目はgrow:1、「A」項目はgrow:1、「Hello world」項目はgrow:2です.
2). flex-shrinkは、flexプロジェクトの縮小率を決定するために使用できる属性です.画面が100 px縮小され、flex項目ごとにflex-shrink: 1;およびflex-shrink: 3;縮小されると、shrif 1は25 px縮小され、shrif 3は75 px縮小される.
3). flex-basis flexプロジェクトのサイズを決定します.上の2行目の写真のように、中心軸を基準にgrow比率を減算した幅がベースサイズです.flex-grow: 0;の場合、最も右側の写真に示すように、flexアイテムの合計幅が決定されます.
4)サムネイル

flex :1; /* flex-grow:1; flex-shrink:1; flex-basis:0; */
flex :1 1 300px; /* flex-grow:1; flex-shrink:1; flex-basis:300px; */

2. grid

🕵️‍♀️ メッシュとは?
ウェブページを碁盤のようにグリッドに分割してグリッドアイテムのプロパティを配置します.
flexのように、グリッドコンテナでdisplay:gridを使用して、グリッドサブアイテムとしてのグリッドアイテムの位置を制御できます.

grid-template-columns: 25% 25% 25% 25%;
grid-template-columns: repeat(4, 25%);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);

以上のソースコードは、親メッシュコンテナとして使用されるプロパティです.grid-template-columnsおよびgrid-template-rowを使用して、行列格子のサイズおよび個数を決定する.grid-template-columns: 25% 25% 25% 25%;は4つのカラムを生成し、各カラムの親の幅は25%です.grid-template-columns: repeat(4, 25%);は上の25%25%25%と同じです.grid-template-columns: repeat(4, 1fr);は、4個ごとに1 frの比率で列メッシュを作成します.
上がgridコンテナに適用されるプロパティであれば、次はgrid itemに適用されるプロパティです.

grid-column: 2/3;
grid-row: 3/4;
grid-area: 1 / 2 / 3 / 4;

の画像を見て、最初のソースコードから始めましょう.grid-column: 2/3;は写真の2番目の位置です.grid-column: 2/4;なら写真の2番から3番の位置ですgrid-row: 3/4;は左下隅の項目位置です.grid-area: 1 / 2 / 3 / 4;は、コードをrow−start/column−start/row−end/column−endに折り畳んで使用することができる.写真の2 3 5 6番の物の位置

.item:nth-child(1) {
/* 1번 라인에서 2칸 */
grid-column: 1 / span 2;
/* 1번 라인에서 3칸 */
grid-row: 1 / span 3;
}

spanを使用して、セルの数を指定できます.

コメント

gridプロパティを使用する場合は、まず構造を描画し、grid-template-columns / rowsを使用してグリッドコンテナにメッシュを適用します.