JS 许冬博客

← 返回文章列表

CSS2017/11/11·2254 次阅读

Flexbox 布局速查手册

Flexbox 布局速查手册

Flexbox 是一维布局方案，记住"容器 + 轴线"就够了。

容器属性

.container {
  display: flex;
  flex-direction: row; /* 主轴方向：row | column */
  justify-content: center; /* 主轴对齐 */
  align-items: center; /* 交叉轴对齐 */
  gap: 12px; /* 项目间距 */
  flex-wrap: wrap; /* 是否换行 */
}

项目属性

.item {
  flex: 1; /* flex-grow flex-shrink flex-basis 的简写 */
  align-self: flex-end; /* 单独覆盖交叉轴对齐 */
  order: -1; /* 数值越小越靠前 */
}

经典三栏布局

<div class="layout">
  <aside>左侧</aside>
  <main>中间自适应</main>
  <aside>右侧</aside>
</div>

.layout {
  display: flex;
  gap: 16px;
}
.layout main {
  flex: 1;
}

水平垂直居中

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

一行代码都不用 hack。Grid 负责二维，Flex 负责一维，二者搭配覆盖 90% 的布局场景。

看到这里了？如果这篇文章帮到过你

请我喝瓶可乐就好 🥤

收款码

评论0 条

还没有评论，来抢沙发～