提示：这是我的个人IT资源网站，所有资源都免费，注册登录后就可以看到密码，需要什么大家尽情选取！
我们如何在编程的时候可以游刃有余，不至于下手难，那就需要在平时的学习中尽可能扎实地掌握知识点，还有我们经常会感到，学过某个知识后，过个几天就容易忘的一干二净，其实想解决这个问题，有效的方法就是加深记忆并记录，加深记忆就是学的时候我们要动手去实现，记录就是我们理解之后，要对知识点进行整理总结，其实学习真没有什么便捷的方法，除非你有超能力，有过目不忘的本领，哈哈哈哈哈哈，反正我是普通人，所以觉得这个方法还是挺有效的，大家不妨坚持下来试试看，包括我也是，坚持中✊
今天我打算学习一下CSS3的flex布局，通过flex布局我们很容易达到某个布局效果，缺点就是浏览器兼容性差，只能兼容IE9及以上的浏览器，但是随着时间的推移，浏览器也在不断升级更新，所以兼容性会越来越好的。
目录
Flex布局是什么
Flex布局就是弹性布局，任何一个容器都可以指定为Flex布局。
块级元素
.box{
display:flex;
}
行内元素也可以使用Flex布局
.box{
display:inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀，例如苹果系设备的Safari浏览器。
.box{
display:-webkit-flex;
display:flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
尽然提及这三个属性了，那我们必须看一下这三个属性是干啥的。
float属性为浮动属性，定义元素在哪个方向浮动，该属性有四个值
left：元素向左浮动
right：元素向右浮动
none：默认值。元素不浮动，并会显示在其文本中出现的位置
inherit：规定应该从父元素继承float属性的值
clear属性规定元素的哪一侧不允许浮动其他元素
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左右两侧均不允许浮动元素
none：默认值。允许浮动元素出现在两侧
inherit：规定应该从父元素继承clear属性的值
vertical-align属性设置元素的垂直对齐方式
baseline：默认。元素放置在父元素的基线上
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行中最低的元素的顶端对齐
text-bottom：把元素的低端与父元素字体的低端对齐
length
%：使用"line-height"属性的百分比值来排列此元素。允许使用负值
inherit：规定应该从父元素继承vertical-align属性的值
我们用float来试试，看看是否会失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 200px;height: 200px;border: 1px red solid;">
<p style="float:left">123</p>
<p>456</p>
<font color="red">div未使用flex布局</font>
</div>
<div style="display: flex;width: 200px;height: 200px;border: 1px red solid;">
<p>123</p>
<p style="float:right">456</p>
<font color="red">div使用flex布局</font>
</div>
</body>
</html>
基本概念
采用Flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员，简称为Flex项目
容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
大家需要仔细看一下这个图，因为下面所有属性的布局都是以这个图的标志为基础讲解的
容器的属性
看一下都有什么属性和属性值，会实现什么效果
-
flex-direction属性决定主轴的方向（即项目的排列方向）
.box{
flex-direction:row|row-reverse|column|column-reverse
}
row(默认值)：主轴为水平方向，起点在左端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex;flex-direction:row;width: 200px;height: 200px;border: 1px red solid;">
<div>flex项目一</div>
<div>flex项目二</div>
</div>
</body>
</html>
row-reverse：主轴为水平方向，起点在右端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex;flex-direction:row-reverse;width: 200px;height: 200px;border: 1px red solid;">
<div>flex项目一</div>
<div>flex项目二</div>
</div>
</body>
</html>
column：主轴为垂直方向，起点在上沿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex;flex-direction:column;width: 200px;height: 200px;border: 1px red solid;">
<div>flex项目一</div>
<div>flex项目二</div>
</div>
</body>
</html>
column-reverse：主轴为垂直方向，起点在下沿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex;flex-direction:column-reverse;width: 200px;height: 200px;border: 1px red solid;">
<div>flex项目一</div>
<div>flex项目二</div>
</div>
</body>
</html>
-
flex-wrap属性默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
.box{
flex-wrap:nowrap|wrap|wrap-reverse;
}
nowrap(默认)：不换行
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div style="display: flex;flex-direction:row;flex-wrap:nowrap;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
</div>
</body>
</html>
wrap：换行，第一行在上方
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div style="display: flex;flex-direction:row;flex-wrap:wrap;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
</div>
</body>
</html>
wrap-reverse：换行，第一行在下方
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap-reverse;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
</div>
</body>
</html>
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box{
flex-flow:;
}
实现一下水平排列换行反转
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div style="display: flex;flex-flow:row wrap-reverse;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
</div>
</body>
</html>
- justify-content属性定义了项目在主轴上的对齐方式
.box{
justify-content:flex-start|flex-end|center|space-between|space-around;
}
flex-start(默认值)：左对齐
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;justify-content:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
flex-end：右对齐
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;justify-content:flex-end;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
center：居中
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;justify-content:center;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
space-between：两端对齐，项目之间的间隔都相等
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;justify-content:space-between;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;justify-content:space-around;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
-
align-items属性定义项目在交叉轴上如何对齐
.box{
align-items:flex-start|flex-end|center|baseline|stretch;
}
flex-start：交叉轴的起点对齐
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;align-items:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
flex-end：交叉轴的终点对齐
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;align-items:flex-end;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
center：交叉轴的中点对齐
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div style="display: flex;flex-direction:row;align-items:center;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
baseline：项目的第一行文字的基线对齐
<!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>
.item {
width: 200px;
height: 80px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;align-items:baseline;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;align-items:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
</div>
</body>
</html>
-
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
.box{
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
}
多根轴线，我理解为容器内的项目有多行时，就存在多根主轴线，大家可以和上面的align-items属性对比一下
flex-start：与交叉轴的起点对齐
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
<div class="item">flex项目七</div>
<div class="item">flex项目八</div>
<div class="item">flex项目九</div>
</div>
</body>
</html>
flex-end：与交叉轴的终点对齐
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:flex-end;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
<div class="item">flex项目七</div>
<div class="item">flex项目八</div>
<div class="item">flex项目九</div>
</div>
</body>
</html>
center：与交叉轴的中点对齐
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:center;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
<div class="item">flex项目七</div>
<div class="item">flex项目八</div>
<div class="item">flex项目九</div>
</div>
</body>
</html>
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:space-between;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
<div class="item">flex项目七</div>
<div class="item">flex项目八</div>
<div class="item">flex项目九</div>
</div>
</body>
</html>
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:space-around;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
<div class="item">flex项目七</div>
<div class="item">flex项目八</div>
<div class="item">flex项目九</div>
</div>
</body>
</html>
stretch(默认值)：轴线占满整个交叉轴
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item">flex项目三</div>
<div class="item">flex项目四</div>
<div class="item">flex项目五</div>
<div class="item">flex项目六</div>
<div class="item">flex项目七</div>
<div class="item">flex项目八</div>
<div class="item">flex项目九</div>
</div>
</body>
</html>
项目的属性
-
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item{
order:;
}
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="order: 3;">flex项目一</div>
<div class="item" style="order: 2;">flex项目二</div>
<div class="item" style="order: 1;">flex项目三</div>
</div>
</body>
</html>
-
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item{
flex-grow:;/default 0/
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
看看flex-grow都为0的效果
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="flex-grow: 0;">flex项目一</div>
<div class="item" style="flex-grow: 0;">flex项目二</div>
<div class="item" style="flex-grow: 0;">flex项目三</div>
</div>
</body>
</html>
看看flex-grow都为1的效果
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="flex-grow: 1;">flex项目一</div>
<div class="item" style="flex-grow: 1;">flex项目二</div>
<div class="item" style="flex-grow: 1;">flex项目三</div>
</div>
</body>
</html>
看看flex-grow两边为1中间为2的效果
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="flex-grow: 1;">flex项目一</div>
<div class="item" style="flex-grow: 2;">flex项目二</div>
<div class="item" style="flex-grow: 1;">flex项目三</div>
</div>
</body>
</html>
-
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item{
flex-shrink:;
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
<!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>
.item {
width: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="flex-shrink: 1;">flex项目一</div>
<div class="item" style="flex-shrink: 1;">flex项目二</div>
<div class="item" style="flex-shrink: 0;">flex项目三</div>
<div class="item" style="flex-shrink: 1;">flex项目四</div>
<div class="item" style="flex-shrink: 1;">flex项目五</div>
</div>
</body>
</html>
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item{
flex-basis:|auto;/default auto/
}
它可以设为跟width和height属性一样的值（比如350px），则项目将占据固定空间。
<!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>
.item {
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="flex-basis: auto;">flex项目一</div>
<div class="item" style="flex-basis: 200px;">flex项目二</div>
<div class="item" style="flex-basis: 300px;">flex项目三</div>
</div>
</body>
</html>
- flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{
flex:none|[<‘flex-grow’><‘flex-shrink’>?||<‘flex-basis’>]
}
该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
<!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>
.item {
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="flex: auto;">flex项目一</div>
<div class="item" style="flex: none;">flex项目二</div>
<div class="item" style="flex: 2 0 300px;">flex项目三</div>
</div>
</body>
</html>
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item{
align-self:auto|flex-start|flex-end|center|baseline|stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
<!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>
.item {
border: 1px red solid;
}
</style>
</head>
<body>
<div
style="display: flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
<div class="item" style="align-self: auto;">flex项目一</div>
<div class="item">flex项目二</div>
<div class="item" style="align-self: flex-end;">flex项目三</div>
</div>
</body>
</html>
以上就是Flex布局从容器到项目的所有属性，学完之后感觉很灵活，可以作用到页面最小的模块，之前遇到元素需要垂直居中对齐时很头疼，但学完Flex布局后感觉就很简单了，单轴可以使用align-items多轴可以使用align-content，大家可以看看我的例子和效果图，就会好理解很多。