现代CSS布局技术

Flexbox布局

1. Flex容器属性

   • display: flex
   • flex-direction
   • flex-wrap
   • justify-content
   • align-items
   • align-content
   • gap

2. Flex项目属性

   • flex-grow
   • flex-shrink
   • flex-basis
   • align-self
   • order

Grid布局

1. Grid容器属性

   • display: grid
   • grid-template-columns
   • grid-template-rows
   • grid-template-areas
   • grid-gap
   • grid-auto-flow
   • place-items
   • place-content

2. Grid项目属性

   • grid-column
   • grid-row
   • grid-area
   • place-self

常见布局实践

1. 响应式布局

   .grid-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1rem;
   }

2. 圣杯布局

   .holy-grail {
     display: grid;
     grid-template: 
       "header header header" auto
       "nav main aside" 1fr
       "footer footer footer" auto
       / auto 1fr auto;
   }

3. 居中布局

   /* Flexbox方案 */
   .center-flex {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   /* Grid方案 */
   .center-grid {
     display: grid;
     place-items: center;
   }

容器查询

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 3fr;
  }
}

子网格(Subgrid)

.parent {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.child {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: subgrid;
}

最佳实践

1. 布局选择

   • 一维布局用Flexbox
   • 二维布局用Grid
   • 响应式布局结合使用

2. 性能考虑

   • 避免嵌套过深
   • 合理使用auto-fit/auto-fill
   • 注意回流和重绘

3. 浏览器兼容

   • 检查特性支持
   • 提供降级方案
   • 使用@supports