快速提示：運輸彈性CSS組件

>本文演示了CSS中的容器查詢如何創建具有內置佈局變化的可重複使用的組件，從而實現了“構建一次，部署到處都可以部署”方法。 該示例著重於適應不同屏幕尺寸的訂閱表單。

表格利用CSS網格來佈局靈活性。 定義了三個網格區域（傳奇，字段，提交），並使用容器查詢根據容器的寬度進行更改。 視頻顯示了佈局調整。

>

元素被指定為使用.subscription-form的容器。 嵌套container-type: inline-size;div是由容器查詢靶向的：> .form__content

>第一個容器查詢（

.subscription-form {
  container-type: inline-size;
}

.form__content {
  display: grid;
  gap: 1rem;
}

）定義了中型佈局的網格模板：

@container (min-width: 375px)

第二個查詢（

@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }
  /* ... grid area assignments for legend, .form-group, button ... */
}

）調整了較大屏幕的佈局：

@container (min-width: 700px)

另一個視頻展示了響應行為。

@container (min-width: 700px) {
  .form__content {
    grid-template-areas: "legend field submit";
  }
  button {
    align-self: end;
  }
}

> Codepen演示提供了一個實時的交互式示例。 這種方法展示了容器查詢以創建可重複使用和適應性的CSS組件的功能。 此摘錄源於

釋放CSS

>的力量。

以上是快速提示：運輸彈性CSS組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！