返回

flex布局一学就会

前端

在学习flex布局之前，我们是如何让如下四个盒子排在一列呢？我们也许会用浮动、定位等等。当我们使用的时候我们会觉得很麻烦，需要调间距、量距离等。然而学习了felx布局，我们可以轻松的解决这些问题。 2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地解决盒子的排列问题，它也被认为是 CSS3 中最强大的布局方案，Flexbox 支持一维布局和二维布局。

一、Flex 布局的基本使用

  1. Flex 布局的容器元素

    要使用 Flex 布局，首先需要创建一个容器元素，并将其设置为 flex 布局。可以使用以下 CSS 属性来实现：

    display: flex;

  2. Flex 布局的子元素

    容器元素的子元素就是 Flex 布局中的项目元素。这些项目元素可以是任何类型的 HTML 元素。项目元素的默认布局方式是按照水平方向排列。

  3. Flex 布局的属性

    Flex 布局提供了许多属性，可以用来控制项目元素的排列方式。这些属性包括：

    • flex-direction：控制项目元素的排列方向。可以取值 flex-row（默认）、flex-column、flex-row-reverse 和 flex-column-reverse。
    • flex-wrap：控制项目元素是否换行。可以取值 nowrap（默认）、wrap 和 wrap-reverse。
    • flex-flow：是 flex-direction 和 flex-wrap 的简写形式。
    • justify-content：控制项目元素在主轴上的排列方式。可以取值 flex-start（默认）、flex-end、center、space-between 和 space-around。
    • align-items：控制项目元素在交叉轴上的排列方式。可以取值 flex-start（默认）、flex-end、center 和 stretch。
    • align-content：控制项目元素在交叉轴上剩余空间的分配方式。可以取值 flex-start（默认）、flex-end、center、space-between 和 space-around。

二、Flex 布局的常见用法

  1. 水平排列

    要将项目元素水平排列，可以将容器元素的 flex-direction 属性设置为 flex-row。例如：

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

  2. 垂直排列

    要将项目元素垂直排列，可以将容器元素的 flex-direction 属性设置为 flex-column。例如：

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

  3. 换行

    要让项目元素换行，可以将容器元素的 flex-wrap 属性设置为 wrap。例如：

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

  4. 对齐项目元素

    可以使用 justify-content 和 align-items 属性来对齐项目元素。例如，以下 CSS 代码可以将项目元素水平居中并垂直居中：

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

三、Flex 布局的高级用法

  1. 弹性盒模型

    Flex 布局中的项目元素可以具有弹性盒模型。弹性盒模型允许项目元素根据可用空间自动调整其大小。要使用弹性盒模型，需要将项目元素的 flex 属性设置为一个非零值。例如：

    .item {
  flex: 1;
}

    上面的 CSS 代码将使项目元素占据容器元素的所有可用空间。

  2. 顺序属性

    顺序属性可以控制项目元素在容器元素中的顺序。顺序属性的取值可以是数字或。数字越小，项目元素的顺序越靠前。关键字有 first 和 last，分别表示项目元素位于容器元素的第一个和最后一个。例如：

    .item1 {
  order: -1;
}

.item2 {
  order: 1;
}

    上面的 CSS 代码将使 item1 位于 item2 之前。

四、Flex 布局的兼容性

Flex 布局目前在所有主流浏览器中都得到了很好的支持。但是，在一些旧版本浏览器中，Flex 布局可能存在一些兼容性问题。因此，在使用 Flex 布局时，需要考虑浏览器的兼容性问题。