Flex布局

Flex布局

Flex布局（弹性盒子布局）是CSS3中一种强大的布局模式，它为我们提供了一种更有效的方式来设计响应式页面结构。

一.什么是Flex布局？

Flex布局是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，这使得元素在容器内的排列、对齐和空间分配变得更加简单和灵活。

基本概念

采用Flex布局的元素称为Flex容器，简称"容器"。它的所有直接子元素自动成为容器成员，称为Flex项目，简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。

二.Flex容器属性

1.display

定义一个Flex容器，可以是行内或块级元素：

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

2.flex-direction

决定主轴的方向（即项目的排列方向）：

.container {
  flex-direction: row; /* 默认值：从左到右 */
  flex-direction: row-reverse; /* 从右到左 */
  flex-direction: column; /* 从上到下 */
  flex-direction: column-reverse; /* 从下到上 */
}

3.flex-wrap

默认情况下，项目都排在一条线上。flex-wrap定义如果一条轴线排不下，如何换行：

.container {
  flex-wrap: nowrap; /* 默认不换行 */
  flex-wrap: wrap; /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}

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; /* 项目的第一行文字的基线对齐 */
}

三.Flex项目属性

1.order

定义项目的排列顺序。数值越小，排列越靠前，默认为0：

.item {
  order: <integer>; /* 整数值 */
}

2.flex-grow

定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大）：

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

3.flex-shrink

定义了项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）：

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

4.flex-basis

定义了在分配多余空间之前，项目占据的主轴空间：

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

5.flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto：

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

6.align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性：

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

四.应用

1. 水平垂直居中

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

2. 圣杯布局

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

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

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

main {
  flex: 1;
}

nav, aside {
  flex: 0 0 200px;
}

nav {
  order: -1;
}

3. 响应式导航栏

.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.logo {
  margin-right: auto;
}

.nav-links {
  display: flex;
}

@media (max-width: 768px) {
  .navbar, .nav-links {
    flex-direction: column;
  }
}

五.浏览器兼容性

Flex布局已被所有现代浏览器支持，包括：

• Chrome 29+
• Firefox 28+
• Safari 9+
• Edge 12+
• iOS Safari 9+
• Android Browser 4.4+

六.主要优势包括：

1. 简化复杂布局的实现
2. 轻松实现元素的水平和垂直居中
3. 创建自适应和响应式设计
4. 改变元素的视觉顺序而不影响HTML结构

小结

掌握Flex布局是现代前端开发者的必备技能，它能够大大提高我们创建复杂界面的效率和灵活性。