目录
1、伸缩容器、伸缩项目
2、主轴方向(flex-direction)
3、主轴换行方式(flex-wrap)
4、flex-flow
5、主轴对齐方式(justify-content)
6、侧轴对齐方式_一行(align-items)
7、侧轴对齐方式_多行(align-content)
8、元素水平垂直居中
9、项目在主轴的基准长度(flex-basis)
10、flex-grow(伸)
11、flex-shrink(缩)
12、flex复合属性
13、项目排序(order)
14、单独对齐(align-self)
1、伸缩容器、伸缩项目
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>01_伸缩容器_伸缩项目</title><style>.outer {width: 1000px;height: 600px;background-color: #888;/* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;}.inner {width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;box-sizing: border-box;}</style>
</head><body><div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner"><div>a</div><div>b</div><div>c</div></div></div>
</body></html>2、主轴方向(flex-direction)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02_主轴方向</title><style>.outer {width: 1000px;height: 600px;background-color: #888;margin: 0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;/* 调整主轴方向，水平从左到右，默认 *//* flex-direction: row; *//* 调整主轴方向，水平从右到左 */flex-direction: row-reverse;/* 调整主轴方向，垂直从上到下 *//* flex-direction: column; *//* 调整主轴方向，垂直从下到上 *//* flex-direction: column-reverse; */}.inner {width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;box-sizing: border-box;}</style>
</head>
<body><div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div></div>
</body>
</html>3、主轴换行方式(flex-wrap)
.outer {width: 1000px;height: 600px;background-color: #888;margin: 0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction: row;/* 主轴换行方式，不换行，默认值 *//* flex-wrap: nowrap; *//* 主轴换行方式，换行 */flex-wrap: wrap;/* 主轴换行方式，反向换行 *//* flex-wrap: wrap-reverse; */
}4、flex-flow
不推荐使用
5、主轴对齐方式(justify-content)
.outer {width: 1000px;height: 600px;background-color: #888;margin: 0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction: row;/* 主轴换行方式，换行 */flex-wrap: wrap;/* 主轴的对齐方式，主轴的起始位置 *//* justify-content: flex-start; *//* 主轴的对齐方式，主轴的结束位置 *//* justify-content: flex-end; *//* 主轴的对齐方式，中间对齐 *//* justify-content: center; *//* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 *//* justify-content: space-around; *//* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */justify-content: space-between;/* 主轴的对齐方式，项目均匀的分布在一行中 *//* justify-content: space-evenly; */
}6、侧轴对齐方式_一行(align-items)
7、侧轴对齐方式_多行(align-content)
8、元素水平垂直居中
9、项目在主轴的基准长度(flex-basis)
10、flex-grow(伸)
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>10_伸缩项目_伸</title><style>.outer {width: 1000px;height: 900px;background-color: #888;margin: 0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction: row;/* 主轴换行方式，换行 */flex-wrap: wrap;/* 主轴的对齐方式，主轴的起始位置 */justify-content: flex-start;}.inner {width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;box-sizing: border-box;flex-grow: 0;}/* .inner1 {flex-grow: 1;} */.inner2 {/* flex-grow: 2; */width: 300px;}/* .inner3 {flex-grow: 3;} */</style>
</head><body><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div></div>
</body></html>11、flex-shrink(缩)
12、flex复合属性
13、项目排序(order)
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
14、单独对齐(align-self)
通过align-self属性，可以单独调整某个伸缩项目的对齐方式
默认值为 auto，表示继承父元素的 align-items 属性。
