超详细flex弹性盒学习笔记

1.1排列方式

display:flex 让元素变为弹性性模型

父元素不写固定宽度的话高度撑开 但宽根据块状元素特性为可视窗口宽度
display:inline-flex 不设置宽高 则为高宽都自动撑开

1.2排列方向

flex-direction设置主轴还是侧轴

row为x轴为主轴 y轴则自动为侧轴
flex-direction:row 轴正常从左到右
flex-direction:row-reverse reverse反转 轴右到左

column为y轴为主轴，x轴则自动归为侧轴
flex-direction:column 将主轴改为竖轴 竖向排列 从上到下
flex-direction:column-reverse 将主轴改为竖轴 竖向反转排列 从下到上

1.3 盒内元素排列方式

justify-content改变主轴元素的排列方式

justify-content:flex-start 轴内元素起点开始排列
justify-content:flex-end 轴内元素终点开始排列
justify-content:center 轴内元素轴居中排列
justify-content:space-between 轴内元素两端对齐排列
justify-content:space-around 轴内元素自动分配对齐排列

1.4 设置侧轴

align-items 改变侧轴元素的排列方式

align-items:flex-start 侧轴元素起点开始排列
align-items:flex-end侧轴元素终点开始排列
align-items:center侧轴元素居中排列
align-items:baseline侧轴元素文字基线对齐排列
align-items:stretch侧轴元素拉伸排列

1.5 设置盒子被压缩时排列

align-content 设置压缩盒子情况时行如何对齐

不论主轴侧轴 每一行之间的对齐方式 需压缩弹性盒才能看出效果
align-content:flex-start 盒子被压缩时行从起点开始排列
align-content:flex-end盒子被压缩时行从终点开始排列
align-content:center盒子被压缩时居中开始排列
align-content:space-between盒子被压缩时两端对齐开始排列
align-content:space-around盒子被压缩时自动分配对齐排列

1.6 是否换行显示

flex-wrap 设置换行如何显示

（一般是在盒内元素高宽不够才能看效果）

flex-wrap:nowrap不换行，弹性盒内元素自动收缩 不超出父容器
flex-wrap:wrap 换行显示
flex-wrap:wrap-reverse 换行显示 切反转顺序 一般不用

1.7 align-self 设置单独子元素对齐

align-self 设置弹性盒内元素自己单独的对齐方式

align-self:flex-start 弹性盒 子元素起点开始排序
align-self:flex-end 弹性盒 子元素终点开始排序
align-self:center 弹性盒 子元素居中排序
align-self:baseline 弹性盒 子元素基线对齐排序
align-self:stretch 弹性盒 子元素拉伸对齐

1.8 flex属性 设置单独子元素收缩和伸展的倍数

flex

flex-grow当容器大时 子元素伸展多少 为1则本身一比一大小 不放大
flex-shrink当容器小时 子元素收缩多少 为1则本身不挤压 不缩得比自身更小
flex-basis设置当前主轴的长度 谁为主轴作用于谁
flex:1 一组属性 默认子元素收缩伸展都为1比1 一般用于弹性盒子设置好header和footer，main设置flex:1自适应长度