0基础进大厂，第23天：CSS中的弹性布局 —— .container能伸能屈

引言

ok，我们继续来聊聊CSS中一个超级强大的布局方式——Flexbox（弹性布局）。有了它，你再也不用为垂直居中发愁了！废话不多说，直接进入正题！

基础篇——Flexbox核心概念

1. 开启Flex容器

.container {
  display: flex; /* 或者 inline-flex */
}

2. 主轴与交叉轴

Flex布局有两个重要概念：

• 主轴（main axis）：默认水平方向
• 交叉轴（cross axis）：默认垂直方向

容器属性

1. flex-direction：主轴方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap：换行方式

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3. justify-content：主轴对齐

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

4. align-items：交叉轴对齐

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

5. align-content：多行对齐

.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

项目属性

1. order：排列顺序

.item {
  order: <integer>; /* 默认0 */
}

2. flex-grow：放大比例

.item {
  flex-grow: <number>; /* 默认0 */
}

3. flex-shrink：缩小比例

.item {
  flex-shrink: <number>; /* 默认1 */
}

4. flex-basis：初始大小

.item {
  flex-basis: <length> | auto; /* 默认auto */
}

5. flex：简写属性

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}

推荐写法：

.item {
  flex: 1; /* 相当于 flex: 1 1 0 */
}

6. align-self：单独对齐

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

实战案例

案例1：完美居中

<div class="container">
  <div class="item">我是居中的内容</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  border: 1px solid #ccc;
}

.item {
  background: pink;
  padding: 20px;
}

案例2：圣杯布局

<div class="container">
  <header>头部</header>
  <main>
    <nav>导航</nav>
    <article>内容</article>
    <aside>侧边栏</aside>
  </main>
  <footer>底部</footer>
</div>

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

main {
  display: flex;
  flex: 1;
}

nav {
  flex: 0 0 200px;
  order: -1;
}

article {
  flex: 1;
}

aside {
  flex: 0 0 300px;
}

案例3：响应式导航

<nav class="navbar">
  <div class="logo">LOGO</div>
  <div class="menu">
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">关于</a>
  </div>
  <div class="user">登录</div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #333;
  color: white;
}

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

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
  
  .menu {
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
  }
}

常见问题

1. 为什么我的flex项目没有平均分配空间？

确保设置了flex: 1或者flex-grow: 1，并且父容器有足够的空间。

2. 如何让最后一个元素靠右？

.container {
  display: flex;
}

.last-item {
  margin-left: auto;
}

3. flex项目的最小尺寸问题

.item {
  min-width: 0; /* 解决文本溢出问题 */
}

总结

Flexbox布局的核心要点：

1. 先设置display: flex创建弹性容器
2. 使用flex-direction确定主轴方向
3. 使用justify-content控制主轴对齐
4. 使用align-items控制交叉轴对齐
5. 使用flex属性控制项目的伸缩性