一:flex的组成部分:弹性容器 , 弹性盒子 , 主轴 , 侧轴/交叉轴
给父盒子添加display:flex;变成弹性容器 子元素变成弹性盒子
注意点:display: flex; 一定要给亲爸爸加
二.主轴对齐方式(写给父元素)
◇默认值 起点排列 :justify-content: flex-start;
◇终点开始排列 : justify-content: flex-end;
◇水平居中 : justify-content: center;
◇盒子水平排列,中间距离1:2 : justify-content: space-around;
◇盒子两边靠边对齐,中间盒子自适应 : justify-content: space-between;
◇盒子平均分,中间距离1:1 : justify-content: space-evenly;
三.侧轴单行对齐方式(写给父元素)
◇侧轴起点开始排列 : align-items: flex-start;
◇侧轴终点开始排列 : align-items: flex-end;
◇垂直居中 : align-items: center;
注意点:侧轴对齐 默认值stretch 拉伸 默认高度和父元素一致,宽度由内容撑开 align-items: stretch; 没内容就设置宽度,有内容就由内容撑开宽度;如果子元素没有设置高度,默认高度和父元素一致,如果子元素设置高度,按照设置的高度来显示
四.侧轴多行对齐方式(写给子元素)
◇起点开始排列,从上往下排列 align-content: flex-start;
◇终点开始排列,从下往上排列 align-content: flex-end;
◇多行侧轴居中对齐 align-content: center;
◇多行侧轴垂直排列,按1:2划分 align-content: space-around;
◇多行侧轴两边靠边,中间高度自适应 align-content: space-between;
◇多行侧轴垂直排列,按1:1比例划分 align-content: space-evenly;
五.flex伸缩比
一.书写格式:flex : 值; (整数)
例: 比如一个父盒子里面有三个盒子,每个子盒子写flex:1;此时每个子盒子各占三分之一
注意点:1.只占用父盒子剩余尺寸 (分配父级剩余的空间)
2. 是给子盒子添加这个属性
二.圣杯布局:两边盒子要固定大小,中间的盒子自适应 (一般用在网页的头部)
注意点:中间flex:1;和width有冲突,优先执行flex:1;
六:flex小结
1. 在flex眼中,标签不再分类。
◇简单说就是没有块级元素,行内元素和行内块元素
◇任何一个元素都可以直接给宽度和高度一行显示
2. Flex不存在脱标的情况:也就是基本淘汰了浮动,更不用清除浮动
3. 当然存在兼容性问题,如果不考虑兼容性可以大量使用,如果是移动端则不用考虑直接flex