js之弹性布局使用方法

弹性布局（Flexbox）是一种现代化的 CSS 布局方法，它可以让您更方便地创建响应式和动态布局。在本篇文档中，我们将介绍弹性布局的基本概念以及如何在项目中使用它。

一、基本概念

1. 容器（Container）：弹性布局由一个容器组成，这个容器负责对其子元素进行排列和对齐。要创建弹性容器，请在 CSS 中将 display 属性设置为 flex 或 inline-flex。

.container {
  display: flex;
}

1. 项目（Item）：容器中的子元素被称为项目。项目可以是任何 HTML 元素，例如文本、图片或其他标签。

二、弹性布局属性

1. 容器的属性

• flex-direction：设置项目在容器中排列的方向。可选值：row（默认），row-reverse，column，column-reverse。

.container {
  flex-direction: row;
}

• flex-wrap：设置项目是否换行。可选值：nowrap（默认），wrap，wrap-reverse。

.container {
  flex-wrap: wrap;
}

• flex-flow：flex-direction 和 flex-wrap 的简写属性。

.container {
  flex-flow: row wrap;
}

• justify-content：设置项目在主轴上对齐的方式。可选值：flex-start（默认），flex-end，center，space-between，space-around。

.container {
  justify-content: center;
}

• align-items：设置项目在交叉轴上对齐的方式。可选值：flex-start，flex-end，center，baseline（默认），stretch。

.container {
  align-items: center;
}

• align-content：设置多行项目在交叉轴上对齐的方式。可选值：flex-start，flex-end，center，space-between，space-around，stretch（默认）。

.container {
  align-content: center;
}

2. 项目的属性

• order：设置项目的排列顺序。数值越小，排列越靠前，默认为 0。

.item {
  order: 1;
}

• flex-grow：设置项目的放大比例。默认为 0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: 1;
}

• flex-shrink：设置项目的缩小比例。默认为 1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: 0;
}

• flex-basis：设置项目在主轴方向上的初始大小。可以是长度值（如 200px）或百分比（如 50%），默认值为 auto。

.item {
  flex-basis: 200px;
}

• flex：flex-grow，flex-shrink 和 flex-basis 的简写属性。

.item {
  flex: 1 1 200px;
}

• align-self：允许单个项目覆盖容器的 align-items 属性。

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