在编写网页中，需要进行布局页面，整理一下常用的布局方式

一：流式布局（Flow Layout），默认方式，根据元素的顺序从左到右、从上到下依次排序

二：弹性布局（Flexbox Layout），通过设置容器和子元素的属性，实现灵活的布局效果，具有适应性强、易于垂直居中、多行布局、不定宽高等优点

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

三：网格布局（Grid Layout），Grid 是一种二维网格布局系统，可以通过将容器划分成行和列，来实现复杂的布局效果，具有适应性强、可读性好、多列布局、对齐方式灵活等优点

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 16px;
}

四：定位布局（Position Layout），通过设置元素的位置属性（position）、偏移量（top、right、bottom、left）等，来实现元素的精确定位

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  transform: translate(-50%, -50%);
}

五：响应式布局（Responsive Layout），通过设置 CSS 媒体查询（Media Query）来适应不同屏幕大小、分辨率的布局方式

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    justify-content: center;
  }
}

六：多列布局（Multicolumn Layout），将文本或其他内容分成多列的布局方式，可以通过设置列数、列宽、间距等属性来调整布局效果

.gallery {
  column-count: 4;
  column-gap: 10px;
}