改变元素的方向
flex-direction
- row 行排列 轴从左侧进行排列
- row-reverse 轴从右侧进行排列
- column 纵向排列 轴从上进行排列
- column-reverse 纵向排列 轴从下进行排列
该属性是放在盒子里面的（与 display:flex 相同）
相关参考链接：https://blog.csdn.net/qq_48046110/article/details/108369129
设置盒子中元素的换行方式
flex-wrap
- nowrap 宽度不够时不换行
- wrap 宽度不够时换行
统一设置元素排列方式与换行
flex-flow 以上两种方式的简写
flex-flow:row wrap 即为 flex-direction:row;flex-wrap:wrap
主轴与交叉轴
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
主轴和交叉轴是横向还是纵向与排列方式有关。
主轴的对齐方式
justify-content
flex-startflex-endcenter居中space-between两端对齐space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
交叉轴的对齐方式
align-items
flex-startflex-endcenter居中stretch拉伸
多行元素在交叉轴的排列方式
align-content
flex-startflex-endcenter居中space-between两端对齐space-around
单个元素交叉轴控制
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
该属性可能取 6 个值，除了auto，其他都与 align-items 属性完全一致。
flex-startflex-endcenter居中stretch拉伸
元素可用空间分配
flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
元素动态缩小的处理技巧
flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为 1，则空间不足时，前者不缩小。
主轴的基准尺寸定义
flex-basis 主轴的基准尺寸，优先级高于宽度或高度，但低于 max-height。 或 max-width。
弹性元素的组合定义
flex-grow:1 flex-shrink:2 flex-basis:100px 可以写成 flex:1 2 100px
控制弹性元素的排序
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。即可以改变一组盒子的排序。
使用 margin 自动撑满空间
<nav>
<ul>
<li>首页</li>
<li>图书</li>
<li>课程</li>
</ul>
<ul>
<li>abc</li>
</u>
</nav>/* 头像 */
ul:nth-child(2){
border-radius:50%;
width:50px;
height:50%;
}
ul:nth-child(1){
display:flex;
margin-right:auto;
}
>第一个 ul 导航 margin-right:auto; 第二个 ul 中的头像就自动到了最右边。