css之Flex弹性布局（父项常见属性）

🐕前言：

本篇博客会讲解css中的弹性布局的常见用法，

🏨定义flex容器 display:flex

将一个div定义成flex容器，它分为主轴与交叉轴（其中左右边对应主轴的start、end，上下边对应交叉轴的start、end）

display:flex

🏨在flex容器中子组件进行排列

🪂行排列 flex-direction: row

flex-direction: row

🪂将行排列进行翻转排列 flex-direction: row-reverse

flex-direction: row-reverse

注意：由于翻转时主轴的start、end会进行对调，故紧挨着右边界

🏅按列排列 flex-direction: column;

flex-direction: column;

注意：按列排列时主轴的start、end会变成竖轴

🏅按列排列 flex-direction: column-reverse

注意：按列排列时主轴的start、end会变成竖轴，由于翻转时主轴的start、end会进行对调，故紧挨着下边界

flex-direction: column