移动web之flex布局

一: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