flex布局学习

flex布局也称

• 伸缩布局
• 弹性布局
• 伸缩布局
• 弹性布局
• flex布局

flex主要给父盒子设定，子元素成为容器成员，子元素根据父元素可以横向排列，也可以纵向排列，默认是横向
给父级设置flex布局，常见属性：

• flex-direction:设置主轴方向
• justify-content：设置主轴的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置纵轴上的子元素排列方式（多行）
• align-items：设置纵轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction

默认主轴为x，水平向右，纵轴为y
通过设置flex-direction改变主轴可以设置为row，默认x轴从左往右，

row-reverse：x轴从右往左

column：把主轴设置为y轴，子元素从上到下排列

column-reverse:把主轴设置为y轴，子元素从下到上

justify-content

设置主轴上的子元素排列方式（使用时先确定主轴方向）
flex-start：默认值从头部开始如果主轴是x轴，则从左到右

flex-end：从尾部开始排列

center：在主轴居中对齐(如果主轴是x轴则水平居中)

如果是y轴

space-around：平分剩余空间

space-between：先两边贴边再平分剩余空间(重要)，如果是x轴

如果是y轴

flex-wrap

flex布局钟，默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
nowrap：默认不换行
wrap：换行

align-items

设置侧轴的子元素排列方式
flex-start：默认值从上到下
flex-end：从下到上
center：挤在一起居中（垂直居中)
如果主轴为x轴

//默认主轴是x轴row
justify-content:center
//设置侧轴居中
align-items:center

如果y轴为主轴

//设置主轴是y
flex-direction：column
//设置水平居中
justify-content:center
//设置侧轴居中
align-items:center

stretch：拉伸