flex水平垂直居中和平均分配空间

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

一。flex水平垂直居中

       display: flex;
      只能实现块元素的水平居中 不能实现垂直居中 
      
        justify-content: center;
      让子盒子在垂直交叉轴方向居中
        align-items: center;

二。

align-content 定义了多根轴线的对齐方式 定义Y轴

①。flex-start 与交叉轴的起点对齐

②。flex-end 与交叉轴的终点对齐

③。center 垂直居中

④。space-between 与交叉轴两端对齐，轴线之间的间隔平均分布

⑤。space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch（默认值） 轴线占满整个交叉轴 ★ 子元素不设置高度或者高度auto

三。

align-self，交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式

①。align-self: flex-start; 默认值

②。align-self: flex-end;

③。 align-self: center;

四。

①。order 定义项目的排列顺序。数值越小，排列越靠前，默认为0

②。使用flex-grow 平均分配空间不要允许换行，默认值是0，设置值为1，表示平均分配空间

③。flex-shrink用来表示是否被压缩 默认值是1 表示被压缩，改成0表示不被压缩 保持设置的尺寸

flex-shrink：0

flex-shrink：1

④。flex-basis:宽度，优先级比width高，默认值为auto.

⑤。flex-grow，flex-basis，flex-shrink，符合属性，可以直接写，flex:1 1 auto