flex-grow、flex-shrink、flex-basis、9グリッドレイアウトを理解する

<div class="flex-attr">
    <div class="item-1 ピンク">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
    <div class="item-2 スカイブルー">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
    <div class="item-3 グレー">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
</div>

.flex属性{
  下部マージン: 600px;
  幅: 580ピクセル;
  ディスプレイ: フレックス;
}
.item-1 {
  幅: 100ピクセル;
  フレックス成長: 1;
  フレックスシュリンク: 1;
}
.item-2 {
  幅: 100ピクセル;
  フレックス成長: 2;
  フレックス収縮: 2;
}
.item-3 {
  幅: 200ピクセル;
}
。ピンク {
  背景色: ピンク;
}
.スカイブルー{
  背景色: スカイブルー;
}
.グレー{
  背景色: グレー;
}

<div class="squ-4">
  <div class="squ-inner flex">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
     <div class="item">6</div>
     <div class="item">7</div>
     <div class="item">8</div>
     <div class="item">9</div>
  </div>
</div>

.squ-4 {
  位置: 相対的;
  幅: 100%;
  高さ: 0;
  padding-bottom: 100%; /* パディングのパーセンテージは親要素の幅を基準に計算されます*/
  下部マージン: 30px;
}
.squ-4 .squ-inner {
  位置: 絶対;
  上: 0;
  左: 0;
  幅: 100%;
  height: 100%; /* 親要素のコンテナを埋めると、幅と高さは常に等しくなります*/
}
.squ-4 .squ-inner>div {
  幅: calc(98% / 3); 
  高さ: calc(98% / 3);
  右マージン: 1%;
  下部マージン: 1%;
  オーバーフロー: 非表示;
}
.squ-4 .flex {
  ディスプレイ: フレックス;
  flex-wrap: ラップ;
}
.flex>div {
  フレックス成長: 1;
  背景色: スカイブルー;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 50px;
  行の高さ: 2;
}
.flex>div:n番目の型(3n) {
  右マージン: 0;
}
.flex>div:n番目の型(n+7) {
  下マージン: 0;
}

<div class="squ-5">
  <div class="squ-inner">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>

.squ-5 {
  位置: 相対的;
  上: 0;
  左: 0;
  高さ: 0;
  パディング下部: 100%;
}
.squ-5 .squ-inner {
  位置: 絶対;
  上: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  表示: グリッド;
  グリッドテンプレート列: repeat(3, 1fr);
  グリッドテンプレート行: repeat(3, 1fr);
  グリッド自動フロー: 行;
}
.squ-5 .item {
  背景色: ピンク;
  境界線: 1px 実線 #fff;
}