Flexbox 布局

Flexbox 简介

Flexbox（弹性盒子）是一种一维布局模型，可以轻松实现水平或垂直方向的布局。

基本概念

Flex 容器

.container {
  display: flex;
}

Flex 项目

Flex容器的直接子元素自动成为Flex项目。

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

容器属性

1. flex-direction（主轴方向）

.container {
  flex-direction: row;           /* 水平方向，从左到右 */
  flex-direction: row-reverse;   /* 水平方向，从右到左 */
  flex-direction: column;        /* 垂直方向，从上到下 */
  flex-direction: column-reverse; /* 垂直方向，从下到上 */
}

2. flex-wrap（换行）

.container {
  flex-wrap: nowrap;      /* 不换行（默认） */
  flex-wrap: wrap;        /* 换行 */
  flex-wrap: wrap-reverse; /* 反向换行 */
}

3. flex-flow（方向和换行）

.container {
  flex-flow: row wrap;
  flex-flow: column nowrap;
}

4. justify-content（主轴对齐）

.container {
  justify-content: flex-start;    /* 起点对齐 */
  justify-content: flex-end;      /* 终点对齐 */
  justify-content: center;        /* 居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around;  /* 环绕对齐 */
  justify-content: space-evenly;  /* 均匀对齐 */
}

5. align-items（交叉轴对齐）

.container {
  align-items: stretch;    /* 拉伸（默认） */
  align-items: flex-start; /* 起点对齐 */
  align-items: flex-end;   /* 终点对齐 */
  align-items: center;    /* 居中对齐 */
  align-items: baseline;  /* 基线对齐 */
}

6. align-content（多行交叉轴对齐）

.container {
  align-content: stretch;    /* 拉伸（默认） */
  align-content: flex-start; /* 起点对齐 */
  align-content: flex-end;   /* 终点对齐 */
  align-content: center;    /* 居中对齐 */
  align-content: space-between; /* 两端对齐 */
  align-content: space-around;  /* 环绕对齐 */
  align-content: space-evenly;  /* 均匀对齐 */
}

项目属性

1. order（顺序）

.item {
  order: 0;    /* 默认值 */
  order: -1;   /* 排在前面 */
  order: 1;    /* 排在后面 */
}

2. flex-grow（放大比例）

.item {
  flex-grow: 0; /* 不放大（默认） */
  flex-grow: 1; /* 放大 */
  flex-grow: 2; /* 放大2倍 */
}

3. flex-shrink（缩小比例）

.item {
  flex-shrink: 1; /* 缩小（默认） */
  flex-shrink: 0; /* 不缩小 */
}

4. flex-basis（基准大小）

.item {
  flex-basis: auto;  /* 自动（默认） */
  flex-basis: 200px; /* 固定宽度 */
  flex-basis: 50%;   /* 百分比 */
}

5. flex（简写）

.item {
  flex: 0 1 auto;    /* 默认值 */
  flex: 1 1 auto;    /* 放大 */
  flex: 0 0 auto;    /* 固定 */
  flex: 1;           /* flex: 1 1 0% */
  flex: auto;        /* flex: 1 1 auto */
  flex: none;        /* flex: 0 0 auto */
}

6. align-self（单独对齐）

.item {
  align-self: auto;     /* 继承父元素（默认） */
  align-self: stretch;  /* 拉伸 */
  align-self: flex-start; /* 起点对齐 */
  align-self: flex-end;   /* 终点对齐 */
  align-self: center;     /* 居中对齐 */
  align-self: baseline;   /* 基线对齐 */
}

常用布局

1. 水平居中

.container {
  display: flex;
  justify-content: center;
}

2. 垂直居中

.container {
  display: flex;
  align-items: center;
}

3. 水平垂直居中

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

4. 两端对齐

.container {
  display: flex;
  justify-content: space-between;
}

5. 等分布局

.container {
  display: flex;
}

.item {
  flex: 1;
}

6. 固定+自适应

.container {
  display: flex;
}

.sidebar {
  width: 200px;
}

.main {
  flex: 1;
}

7. 多列布局

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 0 33.33%;
  box-sizing: border-box;
}

8. 垂直布局

.container {
  display: flex;
  flex-direction: column;
}

9. 圣杯布局

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.header {
  height: 60px;
}

.main {
  flex: 1;
  display: flex;
}

.sidebar {
  width: 200px;
}

.content {
  flex: 1;
}

.footer {
  height: 60px;
}

实际应用

1. 导航栏

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #333;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.menu {
  display: flex;
  gap: 20px;
}

.menu a {
  color: white;
  text-decoration: none;
}

2. 卡片布局

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 0 0 calc(33.33% - 20px);
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

3. 表单布局

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-group label {
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-row .form-group {
  flex: 1;
}

4. 响应式布局

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 0 0 100%;
}

@media (min-width: 768px) {
  .item {
    flex: 0 0 50%;
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 0 0 33.33%;
  }
}

面试常见问题

1. Flexbox 的优势是什么？

• 简化布局代码
• 容易实现居中对齐
• 支持响应式布局
• 容易实现等高列
• 支持反向排列

2. justify-content 和 align-items 的区别？

• justify-content: 控制主轴方向的对齐方式
• align-items: 控制交叉轴方向的对齐方式

.container {
  display: flex;
  justify-content: center;  /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
}

3. flex: 1 的含义是什么？

flex: 1 是 flex: 1 1 0% 的简写，表示：

• flex-grow: 1（可以放大）
• flex-shrink: 1（可以缩小）
• flex-basis: 0%（基准大小为0）

.item {
  flex: 1;
}

4. 如何实现水平垂直居中？

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

5. flex-wrap 的作用是什么？

flex-wrap控制Flex项目是否换行。

.container {
  flex-wrap: nowrap;      /* 不换行 */
  flex-wrap: wrap;        /* 换行 */
  flex-wrap: wrap-reverse; /* 反向换行 */
}

通过理解Flexbox的各种属性和应用，可以轻松实现各种复杂的布局效果。