CSS Flexbox—— 骨灰级全解析（下）-JavaScript中文网-JavaScript教程资源分享门户

上一篇文章，我们讲解了CSS Flexbox基础部分的知识和技巧，本篇文章将会对Flexbox的高级应用及实例进行详细解析。希望本文可以对前端工程师们深入了解Flexbox的应用提供指导。

Flex Container 属性

justify-items 和 align-items

使用flexbox，通常会设置一个容器（Container），它有两个主要的属性：justify-items和align-items。我们可以使用这两个属性来控制容器内子元素的对齐方式。

justify-items属性用于水平方向的对齐，align-items属性是用于垂直方向。它们接受一下几个值：

flex-start：容器内子元素的左（上）端与容器的左（上）端对齐。
flex-end：容器内子元素的右（下）端与容器的右（下）端对齐。
center：容器内子元素的中心点与容器的中心对齐。
baseline：容器内子元素的基准线与容器的基准线对齐。
stretch：默认值，容器内子元素被拉伸以填满容器的宽（高）。

示例代码：

<div class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
</div>

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

justify-content 和 align-content

justify-content和align-content属性与justify-items和align-items类似，但是它们是用于容器内多个子元素之间的对齐。即，当容器中有不止一行（或一列）子元素时，justify-content和align-content属性就会发挥作用。

justify-content属性和align-content属性可以接受和justify-items和align-items相同的值。

示例代码：

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  height: 300px;
}

// javascriptcn.com 代码示例
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-8">7</div>
  <div class="item item-9">8</div>
</div>

flex-direction

flex-direction属性用于定义容器内子元素的排列方向。

它有以下几个值：

row：默认值，子元素水平排列
row-reverse：子元素水平排列，并且与row相反。
column：子元素垂直排列
column-reverse：子元素垂直排列，并且与column相反

示例代码：

.container {
  display: flex;
  flex-direction: column-reverse;
  height: 300px;
}

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
</div>

Flex Item 属性

flex-basis

flex-basis定义了Flex Item的初始大小。

示例代码：

.item {
  flex-basis: 100px;
}

order

order属性用于改变元素在Flex容器内的排列顺序，默认情况下它们按照源代码中的顺序排列。order的值越小，越靠前，类似于CSS的z-index。

示例代码：

item:nth-child(2) {
  order: 1;
}

item:nth-child(3) {
  order: -1;
}

flex-grow

flex-grow属性用于定义容器内空间的分配比例，决定子元素的拉伸程度。其值为一个数字，表示子元素可以分配的空间的比例，比如下面的代码表示元素1占据了容器中50%的空间，而元素2占据了容器中剩下的50%：

.item-1 {
  flex-grow: 1;
}

flex-shrink

flex-shrink属性定义了子元素的收缩程度，以保证在空间不足的情况下页面部分内容仍然能够被展示。

flex

flex是一个简写属性，包括flex-grow、flex-shrink和flex-basis属性。

示例代码：

.item {
  flex: 1 0 auto;
}

这表示flex-grow为1，flex-shrink为0，flex-basis为auto。

Flex Item 高阶应用

可折行的Flexbox

使用flex-wrap属性可以把Flex容器内的子元素换行。可以选择wrap或nowrap。如果指定了wrap，子元素就会自动换行排列，否则它们会在一行之内排列。

示例代码：

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
</div

Flexbox 滚动条

在Flexbox中创建滚动条有时候是很有用的。有两种创建滚动条的方法，第一种方法是为容器元素创建滚动条，第二种方法是为子元素创建滚动条（前提是容器元素设计的是可滚动的）。

示例代码：

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  overflow-y: scroll;
  height: 400px;
}

.item {
  flex-basis: 100px;
  height: 100px;
}

上面的代码就可以实现效果：容器中的对象可以互相关联其中两个的实际效果如下，其中一个div的内容进行了滚动，而另一个没有：

Flex Grid

Flex Grid 就是使用Flexbox创建的网格系统。它简单易用，可以方便地实现响应式设计。

示例代码：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
}

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

.col {
  flex: 1;
  margin-right: 20px;
}

// javascriptcn.com 代码示例
<div class="container">
  <div class="row">
    <div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
  </div>
  <div class="row">
    <div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
  </div>
  <div class="row">
    <div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
  </div>
  <div class="row">
    <div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
  </div>
</div>

总结

本篇文章对Flexbox的高级应用以及实例进行了详细解析，希望让读者在学习和掌握Flexbox的高级用法中得到实质的帮助。同时值得注意的是，还有许多针对Flexbox的扩展与辅助工具，如autoprefixer等，它们都能进一步提升我们的前端开发效率，也更方便我们快速构建出一个完美的页面。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652cc00a7d4982a6ebe57f2e