CSS布局动画演示

Flexbox 控制项

flex-direction

justify-content

center

align-items

flex-wrap

gap

20px

Grid 控制项

grid-template-columns

grid-template-rows

grid-gap

20px

grid-auto-flow

通用控制项

容器宽度

800px

容器高度

500px

子元素数量

布局演示区域

代码输出

CSS 代码

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

HTML 结构

<div class="container">
  <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>