前端面试必问，开发中必用的flex，你是否了解清楚？

前言

flex是面试中经常会问到的问题，实际开发中最常用的css布局，你是否真的了解清楚其原理？

Flexbox是一个强大的布局模型，用于在一个容器内有效地排列、对齐和分配空间。它使得响应式设计变得更加简单和灵活。下面将详细介绍Flexbox的基本原理，并通过代码示例展示如何使用。

Flexbox的基本原理

Flexbox布局通过一个父容器和其子元素的关系来控制布局。其核心思想是将子元素作为弹性项（flex items），并通过调整父容器的属性来管理这些弹性项的排列和对齐。Flexbox布局的主要特点包括：

1. 容器和项：

   • Flex容器（Flex Container）：应用Flexbox布局的元素（通常是一个div），它的直接子元素即为Flex项（Flex Items）。
   • Flex项（Flex Items）：在Flex容器中的子元素。

2. 主轴和交叉轴：

   • 主轴（Main Axis）：默认是水平轴（横向），控制Flex项在主轴上的排列。
   • 交叉轴（Cross Axis）：与主轴垂直的轴（纵向），控制Flex项在交叉轴上的排列。

3. 对齐和分配：

   • Flexbox允许通过设置属性来对齐、分配空间和控制Flex项在容器中的排列方式。

Flexbox的核心属性

1. Flex容器的属性

• display: flex 或 inline-flex

  将一个元素定义为Flex容器。flex用于块级容器，inline-flex用于行内容器。

  .container {
    display: flex;
  }
  

• flex-direction: row | row-reverse | column | column-reverse

  定义主轴的方向和Flex项的排列方向。

  .container {
    flex-direction: row; /* 默认值 */
  }
  

• flex-wrap: nowrap | wrap | wrap-reverse

  控制Flex项是否换行。

  .container {
    flex-wrap: wrap;
  }
  

• flex-flow: flex-direction flex-wrap

  是flex-direction和flex-wrap的简写形式。

  .container {
    flex-flow: column wrap;
  }
  

• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

  定义Flex项在主轴上的对齐方式。

  .container {
    justify-content: center;
  }
  

• align-items: flex-start | flex-end | center | baseline | stretch

  定义Flex项在交叉轴上的对齐方式。

  .container {
    align-items: center;
  }
  

• align-content: flex-start | flex-end | center | space-between | space-around | stretch

  定义多行Flex项在交叉轴上的对齐方式。

  .container {
    align-content: space-around;
  }
  

• align-items: flex-start | flex-end | center | baseline | stretch

  控制单行Flex项在交叉轴上的对齐方式。

  .container {
    align-items: stretch;
  }
  

2. Flex项的属性

• flex-grow: number

  定义Flex项的扩展能力，值越大，扩展的比例越大。

  .item {
    flex-grow: 1;
  }
  

• flex-shrink: number

  定义Flex项的收缩能力，值越大，收缩的比例越大。

  .item {
    flex-shrink: 1;
  }
  

• flex-basis: length | auto

  定义Flex项在主轴上的初始尺寸。

  .item {
    flex-basis: 200px;
  }
  

• flex: flex-grow flex-shrink flex-basis

  是flex-grow、flex-shrink和flex-basis的简写形式。

  .item {
    flex: 1 1 200px;
  }
  

• align-self: auto | flex-start | flex-end | center | baseline | stretch

  允许单个Flex项覆盖align-items的对齐方式。

  .item {
    align-self: flex-end;
  }
  

代码解析

• Flex容器 (.container)：

  • display: flex;：启用Flexbox布局。
  • flex-direction: row;：Flex项沿主轴水平排列。
  • flex-wrap: wrap;：允许Flex项换行。
  • justify-content: space-around;：在主轴上均匀分配空间。
  • align-items: center;：在交叉轴上居中对齐。

• Flex项 (.item)：

  • flex: 1 1 150px;：每个项都可以扩展并收缩，初始尺寸为150px。

通过Flexbox，你可以轻松地创建复杂且响应式的布局，掌握这些基本属性后，你将能够在各种设备和屏幕尺寸上实现灵活而优雅的设计。

–再见