本教程案例在线演示
有路网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
就有这种可能:
现在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的高度
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
属性在各种情况下的效果,这样能更好的帮助你理解。