布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
虽然 Flexbox 非常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使用 Flexbox 布局：
1.整体页面布局
2.完全支持旧浏览器的网站
旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float 的 display: inline-block 或者 display: table等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。
-
基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
-
属性
- flex-direction
默认横向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .flex-container { display: flex; } /* 以下为辅助样式 */ .flex-container { background-color: #F0f0f0; } .flex-container .flex-item { padding: 20px; background-color: #B1FF84; } .flex-container .flex-item:first-child { background-color: #F5DE25; } .flex-container .flex-item:last-child { background-color: #90D9F7; } </style> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div> </body> </html>
flex-container添加：flex-direction: column;
会显示为纵向排列
也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列
注意：
正常排序和反向排序是对项目在容器里的代码顺序，不是按里面值排序，比如上例中第一个项目的内容设置为2，第二个设置为1，反向后会变成1，2
容器宽默认充满父元素，高由里面的项目高决定
没有定义宽高的情况下，横向排列时，项目的宽默认由里面的内容决定，高充满容器
纵向排列时，宽充满容器，高由内容决定
- justify-content
justify-content属性定义了项目在主轴上的对齐方式。
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
效果：
row-reverse会让容器里的项目按内容反向排列，并且沿主轴右对齐，加上flex-end，又会使item左对齐
justify-content还可以设置为以下值：
flex-start | flex-end | center | space-between | space-around | space-evenly;
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。
设置了justify-content后再还可以单独设置item的margin：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 以下为辅助样式 */
.flex-container {
background-color: #F0f0f0;
}
.flex-container .flex-item {
padding: 20px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="margin-right: 20px;margin-left: 400px;">3</div>
</div>
</body>
</html>
效果
- align-items
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
stretch：如果项目未设置高度或设为auto，交叉轴对齐方式默认值为stretch，将占满整个容器的高度
flex-start：如果项目设置了高度，交叉轴对齐方式默认值为 flex-start
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .flex-container { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center } .flex-container { height: 60px; background-color: #F0f0f0; } .flex-container .flex-item { background-color: #B1FF84; height: 30px; width: 30px; text-align: center; line-height: 30px; } .flex-container .flex-item:first-child { background-color: #F5DE25; } .flex-container .flex-item:last-child { background-color: #90D9F7; } </style> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </body> </html>
可以在某个特定的 flex 项上使用 align-self CSS 属性，来使该特定的 flex 项与容器中的其他 flex 项进行对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .flex-container { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center } .flex-bottom { align-self: flex-end } .flex-container { height: 60px; background-color: #F0f0f0; } .flex-container .flex-item { background-color: #B1FF84; height: 30px; width: 30px; text-align: center; line-height: 30px; } .flex-container .flex-item:first-child { background-color: #F5DE25; } .flex-container .flex-item:last-child { background-color: #90D9F7; } </style> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item flex-bottom">3</div> </div> </body> </html>
- flex-wrap
flex 项不允许多行/列排列，如果 flex 容器尺寸对于所有 flex 项来说不够大，那么flex 项将被调整大小以适应单行或列排列。
通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被排列到另一行/列中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
flex-wrap: wrap;
100px;
height: 60px;
background-color: #F0f0f0;
}
.flex-container .flex-item {
background-color: #B1FF84;
height: 30px;
30px;
text-align: center;
line-height: 30px;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
</body>
</html>
-
align-content
多行/列排列的 flex 项在交叉轴上的对齐方式
默认情况下，当 flex 容器的交叉轴（cross axis）上存在多余空间时，您可以在 flex 容器上设置 align-content，以控制 flex 项在交叉轴（cross axis）上的对齐方式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默认）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .flex-container { display: flex; flex-direction: row-reverse; justify-content: space-between; flex-wrap: wrap; align-content: space-evenly; } .flex-container { width: 100px; height: 300px; background-color: #F0f0f0; } .flex-container .flex-item { background-color: #B1FF84; height: 30px; width: 30px; text-align: center; line-height: 30px; } .flex-container .flex-item:first-child { background-color: #F5DE25; } .flex-container .flex-item:last-child { background-color: #90D9F7; } </style> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item ">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> </div> </body> </html>
- flex-grow
flex-grow 只有在 flex 容器中有剩余空间时才会生效。flex 项的 flex-grow 属性指定该 flex 项相对于其他 flex 项将拉伸多少，以填充 flex 容器。默认值为1。当设置为 0 时，该 flex 项将不会被拉伸去填补剩余空间。在这个例子中，两个项的比例是 1:2，意思是在被拉伸时，第一个 flex 项将占用剩余空间的 1/3，而第二个 flex 项将占据剩余空间的 1/3的2/3。(如果item不定义flex-grow，也不定义宽度，则item宽度由内容决定)
html:
上例中，item的宽度即使不定义，item2和item3也会拉升，item1宽度由内容决定
flex-shrink:收缩：
flex-shrink 只有在 flex 容器空间不足时才会生效。它指定 flex 项相对于其他 flex 项将缩小多少，以使 flex 项不会溢出 flex 容器。 默认值为 1。当设置为0时，该 flex 项将不会被收缩。在这个例子中，比例是1：2，意思是在收缩时，第一项将收缩 1/3 ，而第二个项目将被收缩 2/3 。注： flex-shrink 和 flex-grow 正好相反
.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}
-
案例
响应式菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> /*Flexbox是一个相当优秀的属性，它可能会成为未来版面布局的一部分。 如果考虑到只处理移动方面的，那么兼容性就可以忽略了。 -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性*/ .navigation { list-style: none; margin: 0; background: deepskyblue; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /*多栏多列布局*/ -webkit-flex-flow: row wrap; /*让灵活的项目在必要的时候进行拆行*/ justify-content: flex-end; } .navigation a { text-decoration: none; display: block; padding: 1em; color: white } .navigation a:hover { background: #00AEE8 } @media all and (max-800px) { .navigation { justify-content: space-around } } @media all and (max-600px) { .navigation { -webkit-flex-flow: column wrap; padding: 0 } } /*宽度小于600的时候自动换行：*/ .navigation a { text-align: center; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.1) } .navigation li:last-of-type a { background: #00AEE8; border-bottom: 0; } /*指定父元素的最后一个 li 元素的背景色： li:nth-child(3) li的第3个元素 li:first-child 父元素的第一个子元素li里的内容*/ </style> <body> <ul class="navigation"> <li><a href="#">首页</a></li> <li><a href="#">简介</a></li> <li><a href="#">公司介绍</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>
1.flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
2.默认情况下，每个flex项目的宽高由内容决定
3.通过媒体查询，浏览器宽度小于800时，让项目在主轴均匀分隔，小于600时，变为纵向排列