Flexbox - 快速指南
Flexbox - Overview
C ascading S tyle S heets（CSS）是一种简单的设计语言，旨在简化使网页呈现的过程。 CSS处理网页的外观和感觉部分。
使用CSS，您可以控制文本的颜色，字体的样式，段落之间的间距，列的大小和布局，使用的背景图像或颜色，布局设计，不同设备的显示变化和屏幕尺寸以及其他各种影响。
要确定框的位置和尺寸，在CSS中，您可以使用其中一种布局模式 -
The block layout - 此模式用于布局文档。
The inline layout - 此模式用于布局文本。
The table layout - 此模式用于布置表格。
The table layout - 此模式用于定位元素。
所有这些模式都用于对齐特定元素，如文档，文本，表格等，但是，这些模式都不能提供构建复杂网站的完整解决方案。 最初，这用于使用浮动元素，定位元素和表格布局（通常）的组合来完成。 但浮子只允许水平放置盒子。
什么是Flexbox？
除了上述模式，CSS3还提供了另一种布局模式Flexible Box，通常称为Flexbox 。
使用此模式，您可以轻松地为复杂的应用程序和网页创建布局。 与浮动不同，Flexbox布局可以完全控制框的方向，对齐，顺序和大小。
Flexbox的功能
以下是Flexbox布局的显着特征 -
Direction - 您可以在任何方向上排列网页上的项目，例如从左到右，从右到左，从上到下，从下到上。
Order - 使用Flexbox，您可以重新排列网页内容的顺序。
Wrap - 如果网页内容的空间不一致（单行），您可以将它们包装到多行（水平）和垂直。
Alignment - 使用Flexbox，您可以将网页的内容与其容器对齐。
Resize - 使用Flexbox，您可以增加或减少页面中项目的大小以适应可用空间。
支持浏览器
以下是支持Flexbox的浏览器。
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+
- Android 4.4+
- iOS 7.1+
Flexbox - Flex Containers
要在应用程序中使用Flexbox，您需要使用display属性创建/定义Flex容器。
Usage -
display: flex | inline-flex
此属性接受两个值
flex - 生成块级弹性容器。
inline-flex - 生成内联flex容器框。
现在，我们将看到如何使用display属性和示例。
Flex
将此值传递给display属性时，将创建块级Flex容器。 它占用父容器（浏览器）的整个宽度。
以下示例演示如何创建块级Flex容器。 在这里，我们创建了六个不同颜色的盒子，我们使用了flex容器来容纳它们。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.container{
display:flex;
}
.box{
font-size:35px;
padding:15px;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开由于我们已将值flex赋予display属性，因此容器使用容器的宽度（浏览器）。
您可以通过向容器添加边框来观察此情况，如下所示。
.container {
display:inline-flex;
border:3px solid black;
}
它会产生以下结果 -
新页面打开内联flex
将此值传递给display属性时，将创建一个内联级别的flex容器。 它只需要内容所需的位置。
以下示例演示如何创建内联Flex容器。 在这里，我们创建了六个具有不同颜色的盒子，我们使用了内联 - 柔性容器来容纳它们。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.container{
display:inline-flex;
border:3px solid black;
}
.box{
font-size:35px;
padding:15px;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开由于我们使用了内联flex容器，因此它只占用了包装其元素所需的空间。
Flexbox - Flex-Direction
flex-direction属性用于指定需要放置flex容器（flex-items）元素的方向。
usage -
flex-direction: row | row-reverse | column | column-reverse
此属性接受四个值 -
row - 从左到右水平排列容器的元素。
row-reverse - 从右到左水平排列容器的元素。
column - 从左到右垂直排列容器的元素。
column-reverse - 从右到左垂直排列容器的元素。
现在，我们将举几个例子来演示direction属性的用法。
行
将此值传递给direction属性时，容器的元素从左到右水平排列，如下所示。
以下示例演示将值row传递给flex-direction属性的结果。 在这里，我们使用flex-direction值row创建六个具有不同颜色的框。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:inline-flex;
border:3px solid black;
flex-direction:row;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开row-reverse
将此值传递给direction属性时，容器的元素从右到左水平排列，如下所示。
以下示例演示将值row-reverse传递给flex-direction属性的结果。 在这里，我们创建了六个具有不同颜色的框，其中flex-direction值为row-reverse 。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:inline-flex;
border:3px solid black;
flex-direction:row-reverse;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开column
将此值传递给direction属性时，容器的元素从上到下垂直排列，如下所示。
以下示例演示将值column flex-direction属性的结果。 在这里，我们使用flex-direction value column创建六个具有不同颜色的框。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:inline-flex;
border:3px solid black;
flex-direction:column;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开column-reverse
在将此值传递给direction属性时，容器的元素从下到上垂直排列，如下所示。
以下示例演示了将值column-reverse传递给flex-direction属性的结果。 在这里，我们创建了六个具有不同颜色的框，其中flex-direction值为column-reverse 。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:inline-flex;
border:3px solid black;
flex-direction:column-reverse;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Flexbox - Flex-Wrap
通常，如果容器的空间不足，其余的弹性项目将被隐藏，如下所示。
flex-wrap属性用于指定flex-container是单行还是多行的控件。
usage -
flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse
此属性接受以下值 -
wrap - 如果空间不足，容器的元素（flexitems）将从顶部到底部包裹成额外的柔性线。
wrap-reverse - 如果空间不足，容器的元素（flex-items）将从底部到顶部包裹成额外的柔性线。
现在，我们将看到如何使用wrap属性和示例。
wrap
在将值wrap传递给属性flex-wrap ，容器的元素从左到右水平排列，如下所示。
以下示例演示将值wrap传递给flex-wrap属性的结果。 在这里，我们使用flex-direction值row创建六个具有不同颜色的框。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:row;
flex-wrap:wrap;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开wrap-reverse
在将值wrap-reverse传递给属性flex-wrap ，容器的元素从左到右水平排列，如下所示。
以下示例演示将值wrap-reverse传递给flex-wrap属性的结果。 在这里，我们使用flex-direction值row创建六个具有不同颜色的框。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:row;
flex-wrap:wrap-reverse;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开wrap (column)
在将值wrap传递给属性flex-wrap并将value column flex-direction属性flex-direction ，容器的元素从左到右水平排列，如下所示。
以下示例演示将值wrap传递给flex-wrap属性的结果。 在这里，我们使用flex-direction value column创建六个具有不同颜色的框。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:column;
flex-wrap:wrap;
height:100vh;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开wrap-reverse (column)
在将值wrap-reverse传递给属性flex-wrap并将value column flex-direction属性flex-direction ，容器的元素从左到右水平排列，如下所示。
以下示例演示将值wrap-reverse传递给flex-wrap属性的结果。 在这里，我们创建了六个具有不同颜色的框和带有flex-direction值column框。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:column;
flex-wrap:wrap-reverse;
height:100vh;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Flexbox - Justifying Contents
通常，您可以在排列弹性项目后观察容器中剩余的额外空间，如下所示。
新页面打开使用属性justify-content ，您可以通过按预期分配额外空间来沿主轴对齐内容。 您还可以调整flexitems的对齐方式，以防它们溢出线条。
usage -
justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;
此属性接受以下值 -
flex-start - flex-items放置在容器的开头。
flex-end - flex-items放置在容器的末尾。
center - flex-items放置在容器的中心，其中额外的空间在flex-items的开始和结束处均匀分布。
space-between - 额外的空间在flex-items之间平均分配。
space-around - 额外的空间在柔性物品之间均匀分布，使得容器边缘与其内容物之间的空间是柔性物品之间的空间的一半。
现在，我们将看到如何使用justify-content属性和示例。
flex-start
将此值传递给属性justify-content ，flex-items将放置在容器的开头。
以下示例演示将值flex-start传递给justify-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开flex-end
将此值传递给属性justify-content ，flex-items将放置在容器的末尾。
以下示例演示将值flex-end传递给justify-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:flex-end;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开center
将此值传递给属性justify-content ，flex-items将放置在容器的中心，其中额外空间在flex-items的开始和结尾处均匀分布。
以下示例演示将值center传递给justify-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:center;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开space-between
在将此值传递给属性justify-content ，额外空间在flex项之间均匀分布，使得任意两个flex项之间的空间相同，并且flex-items的开始和结束触及容器的边缘。
以下示例演示了将值space-between传递给justify-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:space-between;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开space-around
在将此值传递给属性justify-content ，额外空间在flex-items之间平均分配，使得任何两个flex-items之间的空间相同。 但是，容器边缘与其内容之间的空间（弹性项目的开始和结束）是弹性项目之间空间的一半。
以下示例演示了将值space-around传递给justify-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:space-around;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开space-evenly
在将此值传递给属性justify-content ，额外空间在flex-items之间均匀分布，使得任意两个flex-items之间的空间相同（包括边缘的空间）。
以下示例演示了将值space-evenly传递给justify-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:space-evenly;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Flexbox - Align Items
align-items属性与justify content相同。 但在这里，物品在交叉通道（垂直）上对齐。
Usage -
align-items: flex-start | flex-end | center | baseline | stretch;
此属性接受以下值 -
flex-start - 弹性项目在容器顶部垂直对齐。
flex-end - 弹性项目在容器底部垂直对齐。
flex-center - 弹性项目在容器的中心垂直对齐。
stretch - 柔性物品垂直对齐，使它们填满容器的整个垂直空间。
baseline - 对齐flex项目，使其文本的基线沿水平线对齐。
flex-start
将此值传递给属性align-items时，Flex项目在容器顶部垂直对齐。
以下示例演示将值flex-start传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开flex-end
将此值传递给属性align-items ，flex-items在容器的底部垂直对齐。
以下示例演示将值flex-end传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:flex-end;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开center
将此值传递给属性align-items ，flex-items在容器的中心垂直对齐。
以下示例演示将值flex-center传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:center;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开stretch
将此值传递给属性align-items ，flex-items将垂直对齐，以便它们填满容器的整个垂直空间。
以下示例演示将值stretch传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:stretch;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开baseline
将此值传递给属性align-items ，将对齐flex-items，使其文本的基线沿水平线对齐。
以下示例演示了将值baseline传递给align-items属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
align-items:baseline;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Flexbox - Align Content
如果flex容器有多行（when，flex-wrap:wrap），align-content属性定义容器中每一行的对齐方式。
Usage -
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
此属性接受以下值 -
stretch - 内容中的线条将拉伸以填充剩余空间。
flex-start - 内容中的所有行都在容器的开头打包。
flex-end - 内容中的所有行都打包在容器的末尾。
center - 内容中的所有行都打包在容器的中心。
space-between - 额外的空间均匀分布在线条之间。
space-around - 额外的空间在线之间均匀分布，每条线周围的空间相等（包括第一行和最后一行）
center
将此值传递给属性align-content ，所有行都打包在容器的中心。
以下示例演示将值center传递给align-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:43%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:center;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开flex-start
将此值传递给属性align-content ，所有行都在容器的开头打包。
以下示例演示将值flex-start传递给align-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开flex-end
将此值传递给属性align-content ，所有行都打包在容器的末尾。
以下示例演示了将值flex-end传递给align-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:flex-end;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开stretch
将此值传递给属性align-content ，线条将拉伸以填充剩余空间。
以下示例演示将值stretch传递给align-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:stretch;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开space-around
在将此值传递给属性align-content ，额外空间在线之间均匀分布，每条线周围的空间相等（包括第一行和最后一行）。
以下示例演示了将值space-around传递给align-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:space-around;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开space-between
将此值传递给属性align-content ，额外空间将均匀分布在行之间，其中第一行将位于顶部，最后一行将位于容器的底部。
以下示例演示了将值space-between传递给align-content属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
align-content:space-between;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Flexbox - Flex-Order
flex-order属性用于定义flexbox项的顺序。
以下示例演示了order属性。 在这里，我们创建了六个彩色方框，标签分别为一个，两个，三个，四个，五个，六个，按相同的顺序排列，我们按照一，二，五，六，三，四的顺序对它们进行重新排序，使用flex-order属性。
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:35px;
padding:15px;
}
.box1{background:green;}
.box2{background:blue;}
.box3{background:red; order:1}
.box4{background:magenta; order:2}
.box5{background:yellow;}
.box6{background:pink;}
.container{
display:inline-flex;
border:3px solid black;
flex-direction:rows;
flex-wrap:wrap;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开- 订购
您还可以为订单分配-ve值，如下所示。
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:35px;
padding:15px;
}
.box1{background:green;}
.box2{background:blue;}
.box3{background:red; order:-1}
.box4{background:magenta; order:-2}
.box5{background:yellow;}
.box6{background:pink;}
.container{
display:inline-flex;
border:3px solid black;
flex-direction:row;
flex-wrap:wrap;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Flexbox - Flexibility
flex-basis
我们使用flex-basis属性在分配空间之前定义flex-item的默认大小。
以下示例演示了flex-basis属性的用法。 在这里，我们创建了3个彩色盒子，并将它们的尺寸固定为150像素。
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:150px; }
.box2{background:blue; flex-basis:150px;}
.box3{background:red; flex-basis:150px;}
.container{
display:flex;
height:100vh;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开flex-grow
我们使用flex-grow属性来设置flex-grow因子。 如果容器中有多余的空间，它指定特定的柔性项目应该增长多少。
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-grow:10; flex-basis:100px; }
.box2{background:blue; flex-grow:1; flex-basis:100px; }
.box3{background:red; flex-grow:1; flex-basis:100px; }
.container{
display:flex;
height:100vh;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开flex-shrink
我们使用flex-shrink属性来设置flex shrink-factor 。 如果容器中没有足够的空间，则指定Flex项目应缩小的程度。
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:200px; flex-shrink:10}
.box2{background:blue; flex-basis:200px; flex-shrink:1}
.box3{background:red; flex-basis:200px; flex-shrink:1}
.container{
display:flex;
height:100vh;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开柔性
有一个简写，可以同时为所有这三个属性设置值; 它被称为flex 。 使用此属性，可以一次将值设置为flex-grow，flex-shrink和flex-basis值。 以下是此属性的语法。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Flexbox - Align Self
此属性类似于align-items ，但在此处，它适用于各个flex项。
Usage -
align-self: auto | flex-start | flex-end | center | baseline | stretch;
此属性接受以下值 -
flex-start - 弹性项目将在容器顶部垂直对齐。
flex-end - flex项目将在容器底部垂直对齐。
flex-center - 弹性项目将在容器的中心垂直对齐。
Stretch - 柔性项目将垂直对齐，以便填充容器的整个垂直空间。
baseline - 弹性项目将在横轴的baseline处对齐。
flex-start
将此值传递给属性align-self时，特定的flex项将在容器顶部垂直对齐。
以下示例演示将值flex-start传递给align-self属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:start;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开flex-end
将此值传递给属性align-self ，特定的flex项将在容器的底部垂直对齐。
以下示例演示将值flex-end传递给align-self属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:flex-end;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开center
在将值center传递给属性align-self ，特定的flex项将在容器的中心垂直对齐。
以下示例演示将值center传递给align-self属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:center;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开stretch
在将此值传递给属性align-self ，特定的弹性项目将垂直对齐，以便填充容器的整个垂直空间。
以下示例演示将值stretch传递给align-self属性的结果。
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta; align-self:stretch;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
height:100vh;
border:3px solid black;
align-items:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
它会产生以下结果 -
新页面打开