HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局（上）

本教程案例在线演示

有路网PC端

有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

Flex容器

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

这就是一个无序列表(ul)里有三个列表元素(li)。

你可以把ul称为父元素，li称为子元素。

要开始使用Flexbox，必须先让父元素变成一个Flex容器。

你可以在父元素中显式的设置display:flex或者display:inline-flex。这样你就可以开始使用Flexbox模块。

实际是显式声明了Flex容器之后，一个Flexbox格式化上下文（Flexbox formatting context）就立即启动了。

使用一个无序列表(ul)和一群列表元素(li)，启动Flexbox格式化上下文的方式如下：

/* 声明父元素为flex容器 */
ul {
    display:flex; /*或者 inline-flex*/
}

给列表元素(li)添加一点基本样式。

li {
    width: 100px;
    height: 100px;
    background-color: #8cacea;
    margin: 8px;
    list-style: none;
}

你将看到的效果如下图所示：

image

默认情况下，li是块级元素，在CSS中垂直排布的，也就是说从上到下排列显示，就像下图这样：

image

然而，简单的写一行代码display:flex，你立即就可以看到布局改变了。

现在列表元素(li)水平排列，从左到右。

image

Flexbox模块的开始，正如前面的介绍，在任何父元素上使用display:flex。

一旦你显式的设置了display属性的值为flex，无序列表ul就会自动变成Flex容器，而其子元素（在本例中是指列表元素li）就变成了Flex项目。

使用了两个关键词，我们把重点放到他们身上。了解他们对于理解后面的知识至关重要。

• Flex容器（Flex Container）：父元素显式设置了display:flex
• Flex项目（Flex Items）：Flex容器内的子元素

这些只是Flexbox模块的基础。

Flex容器属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

通过上面的内容，我们了解了一些基础知识。知道了Flex容器和Flex项目是什么，以及如何启动Flexbox模块。

有设置一个父元素作为一个Flex容器，几个对齐属性可以使用在Flex容器上。

正如你的块元素的width设置了200px，有六种不同的属性可以用于Flex容器。

flex-direction

flex-direction属性控制Flex项目沿着主轴（Main Axis）的排列方向。

它具有四个值：

/* ul 是一个flex容器 */
ul {
    flex-direction: row || column || row-reverse || column-reverse;
}

简单点来说，就是flex-direction属性让你决定Flex项目如何排列。它可以是行（水平）、列（垂直）或者行和列的反向。

从技术上讲，水平和垂直在Flex世界中不是什么方向（概念）。它们常常被称为主轴（Main-Axis）和侧轴（Cross-Axis）。默认设置如下所示。

image

通俗的说，感觉Main-Axis就是水平方向，从左到右，这也是默认方向。Cross-Axis是垂直方向，从上往下。

默认情况下，flex-direction属性的值是row。它让Flex项目沿着Main-Axis排列（从左向右，水平排列）。这就解释了本文开始部分时无序列表的表现效果。

尽管flex-direction属性并没有显式的设置，但它的默认值是row。Flex项目将沿着Main-Axis从左向右水平排列。

image

如果把flex-direction的属性值修改成column，这时Flex项目将沿着Cross-Axis从上到下垂直排列。不再是从左向右排列。

image

flex-wrap

flex-wrap属性有三个属性值：

ul {
    flex-wrap: wrap || nowrap || wrap-reverse;
}

我将通过一个例子来解释如何使用flex-wrap属性。首先在前面的无序列表的HTML结构中多添加几个列表项li。

<ul> <!--parent element-->
    <li></li> <!--first child element-->
    <li></li> <!--second child element-->
    <li></li> <!--third child element-->
    <li></li>
    <li></li>
    <li></li>
</ul>

幸运的是，新添加的Flex项目刚好适合Flex容器大小。也就是Flex项目能刚好填充Flex容器。

image

再深入一点。

继续给Flex容器内添加Flex项目，比如说添加到10个Flex项目。这个时候会发生什么？

<ul> <!--parent element-->
    <li></li> <!--first child element-->
    <li></li> <!--second child element-->
    <li></li> <!--third child element-->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

image

同样的，Flex容器还是能容纳所有的子元素（Flex项目）排列，这是每一个Flex容器的默认行为。Flex容器会在一行内容纳所有的Flex项目。这是因为flex-wrap属性的默认值是nowrap。也就是说，Flex项目在Flex容器内不换行排列。

ul {
    flex-wrap: nowrap; /*Flex容器内的Flex项目不换行排列*/
}

no-wrap不是不可改变的。我们可以改变。

当你希望Flex容器内的Flex项目达到一定数量时，能换行排列。当Flex容器中没有足够的空间放置Flex项目（Flex项目默认宽度），那么Flex项目将会换行排列。把它（flex-wrap）的值设置为wrap就有这种可能：

ul {
    flex-wrap: wrap;
}

现在Flex项目在Flex容器中就会多行排列。

在这种情况下，当一行再不能包含所有列表项的默认宽度，他们就会多行排列。即使调整浏览器大小。

就是这样子。注意：Flex项目现在显示的宽度是他们的默认宽度。也没有必要强迫一行有多少个Flex项目。

image

除此之外，还有一个值：wrap-reverse。

是的，你猜对了。它让Flex项目在容器中多行排列，只是方向是反的。

image

flex-flow

flex-flow是flex-direction和flex-wrap两个属性的速记属性。

你还记得使用border的速记写法？border: 1px solid red。这里的概念是相同的，多个值写在同一行，比如下面的示例：

ul {
    flex-flow: row wrap;
}

image

相当于：

ul {
    flex-direction: row;
    flex-wrap: wrap;
}

除了这个组合之外，你还可以尝试一些其它的组合。flex-flow: row nowrap，flex-flow: column wrap，flex-flow: column nowrap。

justify-content

Flexbox模块真得很好。如果你仍然不相信它的魅力，那么justify-content属性可能会说服你。

justify-content属性可以接受下面五个值之一：

ul {
    justify-content: flex-start || flex-end || center || space-between || space-around
}

justify-content属性又能给我们带来什么呢？提醒你一下，你是否还记得text-align属性。其实justify-content属性主要定义了Flex项目在Main-Axis上的对齐方式。

来看一个简单的例子，还是考虑下面这个简单的无序列表：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

添加一些基本样式：

ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    background-color: #e8e8e9;
}
li {
    background-color: #8cacea;
    width: 100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
}

你将看到的效果是这样：

image

通过justify-content属性，可以让Flex项目在整个Main-Axis上按照我自己的欲望设置其对齐方式。

可能会有以下几种类型。

flex-start

justify-content的默认属性值是flex-start。

flex-start让所有Flex项目靠Main-Axis开始边缘（左对齐）。

ul {
    justify-content: flex-start;
}

image

flex-end

flex-end让所有Flex项目靠Main-Axis结束边缘（右对齐）。

ul {
    justify-content: flex-end;
}

image

center

和你预期的一样，center让所有Flex项目排在Main-Axis中间（居中对齐）。

ul {
    justify-content: center;
}

image

space-between

space-between让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）。

ul {
    justify-content: space-between;
}

image

你注意到有什么不同？看看下图的描述：

image

space-around

最后，space-around让每个Flex项目具有相同的空间。

ul {
    justify-content: space-around;
}

image

和space-between有点不同，第一个Flex项目和最后一个Flex项目距Main-Axis开始边缘和结束边缘的的间距是其他相邻Flex项目间距的一半。看看下图的描述：

image

align-items

align-items属性类似于justify-content属性。只有理解了justify-content属性，才能更好的理解这个属性。

align-items属性可以接受这些属性值：flex-start || flex-end || center || stretch || baseline。

ul {
    align-items: flex-start || flex-end || center || stretch || baseline
}

它主要用来控制Flex项目在Cross-Axis对齐方式。这也是align-items和justify-content两个属性之间的不同之处。

下面是不同的值对Flex项目产生的影响。不要忘记这些属性只对Cross-Axis轴有影响。

首先，让我们设置ul的高度高于li的高度

ul {
      height: 200px;
    }

stretch

align-items的默认值是stretch。让所有的Flex项目高度和Flex容器高度一样。

image

flex-start

正如你所希望的flex-start让所有Flex项目靠Cross-Axis开始边缘（顶部对齐）。

image

flex-end

flex-end让所有Flex项目靠Cross-Axis结束边缘（底部对齐）。

image

center

center让Flex项目在Cross-Axis中间（居中对齐）。

image

baseline

让所有Flex项目在Cross-Axis上沿着他们自己的基线对齐。

image

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      border: 1px solid red;
      display: flex;
      height: 200px;
      align-items: baseline;
    }
    li {
    width: 100px;
    background-color: #8cacea;
    margin: 8px;
    list-style: none;
    font-size: 28px;
  }
  li:nth-child(2){
    font-size: 12px;
  }
  </style>
</head>
<body>
  <ul> <!--parent element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333 33 </li> <!--third child element-->
  </ul>
</body>
</html>

结果看上去有点像flex-start，但略有不同。那“baseline”到底是什么呢？下图应该能帮助你更好的理解。

image

align-content

还记得前面讨论的wrap属性吗？我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。

align-content属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和align-items值一样，但除了baseline属性值。

像align-items属性一样，它的默认值是stretch。你现在应该熟悉这些值。那它又是如何影响Flex容器里的10个Flex项目多行排列方式。

stretch

使用stretch会拉伸Flex项目，让他们沿着Cross-Axis适应Flex容器可用的空间。

你看到的Flex项目间的间距，是Flex项目自身设置的margin值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      border: 1px solid red;
      display: flex;
      height: 400px;
      flex-wrap: wrap;
      align-content:center;
    }
    li {
    width: 100px;
    background-color: #8cacea;
    margin: 8px;
    list-style: none;
    font-size: 28px;
  }
  li:nth-child(2){
    font-size: 12px;
  }
  </style>
</head>
<body>
  <ul> <!--parent element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333</li> <!--third child element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333 33 </li> <!--third child element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333 33 </li> <!--third child element-->
  </ul>
</body>
</html>

image

flex-start

之前你看到过flex-start。这次是让多行Flex项目靠Cross-Axis开始边缘。沿着Cross-Axis从上到下排列。因此Flex项目在Flex容器中顶部对齐。

image

flex-end

flex-end刚好和flex-start相反，让多行Flex项目靠着Cross-Axis结束位置。让Flex项目沿着Cross-Axis从下到上排列，即底部对齐。

image

center

你猜到了，center让多行Flex项目在Cross-Axis中间。在Flex容器中居中对齐。

image

这是Flex容器的最后一个属性。你现在知道如何使用各种Flex容器属性。你可以在工作中实践这些属性。

Flex项目属性

flex-grow || flex-shrink || flex-basis

现在我们把注意力从Flex容器转移到Flex项目及其对齐属性。

像Flex容器，对齐属性也可以用在所有的Flex项目。

flex-grow 和 flex-shrink

flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。

他们可能接受0或者大于0的任何正数。0 || positive number。

接下来阐述它们的使用。使用一个简单的无序列表做为例子，它只包含一个列表项。

ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
}
li {
    background-color: #8cacea;
    height: 100px;
    margin: 8px;
    padding: 10px;
}
<ul>
    <li>I am a simple list</li>
</ul>

添加更多的样式，看起来像这样：

image

默认情况下，flex-grow属性值设置为0。表示Flex项目不会增长，填充Flex容器可用空间。取值为0就是一个开和关的按钮。表示flex-grow开关是关闭的。

如果把flex-grow的值设置为1，会发生：

image

现在Flex项目扩展了，占据了Flex容器所有可用空间。也就是说开关打开了。如果你试着调整你浏览器的大小，Flex项目也会缩小，以适应新的屏幕宽度。

为什么？默认情况下，flex-shrink的值是1，也就是说flex-shrink开关也是打开的。

可以仔细看看flex-grow和flex-shrink属性在各种情况下的效果，这样能更好的帮助你理解。