11.8 flex子元素设置（续）
本节继续讲解flex子元素设置。
11.8.1 容器设置与子元素设置
大多数flex系列属性针对容器进行设置，对各列统一设置，主要包括：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、gap。
少数flex系列属性针对子元素设置，对各列个性化设置。flex子元素设置分两种情况：
（1）flex容器不支持设置。依靠属性默认值进行初始设置，无法在flex容器元素设置，例如：flex-grow、flex-shrink、flex-basis、flex、order。
（2）flex容器支持设置。容器通过相应属性名统一设置，子元素通过另外属性名进行个性化设置。例如：容器的align-items与子元素align-self都是行内垂直居中。
11.8.2 子元素垂直对齐方式align-self
前面已具体讲解，再次说明它的特殊性。flex容器元素通过align-item属性统一设置所有子元素在每一行的垂直对齐方式，flex子元素能够通过align-self单独设置自身的垂直对齐方式。
11.8.3 子元素显示顺序order
属性order表示各子元素的显示顺序，按从小到大显示。默认值0，可设置正负值。
示例代码
属性order表示各子元素的显示顺序，按从小到大显示。默认值0，可设置正负值。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
*{
box-sizing: border-box;
}
.parent{
display: flex;
border: 1px solid #666;
}
[class^="col"]{
width: 150px;
}
.col1{
background-color: #0aaa76;
order: 2;
}
.col2{
background-color: #4aa6fc;
}
.col3{
background-color: #ed7d31;
height: 50px;
order: 3;
}
</style>
</head>
<body>
<div class="parent">
<div class="col1">第1列 小步教程</div>
<div class="col2">第2列 xiaobuteach.com</div>
<div class="col3">第3列</div>
</div>
</body>
</html>
运行效果
实际应用场景。order实际运用通常在响应式布局。前面示例已介绍通过@media设置在不同窗口宽度的排列方向，同时可以调整order顺序。“11.5.2 垂直排列应用于响应式布局”示例调整代码如下。
@media screen and (max-width : 520px) {
.parent{
flex-direction: column;
}
.col2{
order: -2;
}
.col3{
order: -1;
}
}
窗口宽度大于520时按正常顺序显示，小于等于520px时顺序变化。运行效果
