flex布局-xy轴,flex1, banner图,嵌套图片,底部问题

目录

x y轴问题

主轴默认是x轴,设置主轴(x轴)上子元素的排列 

侧轴(y轴)上子元素的对齐方式:

justify-content:center;  align-iteams:center; ​编辑

主轴 换轴是y 轴,设置主轴(x轴)上子元素的排列 ;

侧轴(x轴)上子元素的对齐方式:

algn-items:center;             ​编辑

justify-content:center; align-items:center;          ​编辑

移动端底部问题

banner图问题

小图片和文字问题;

主内容区滚动问题

---

x y轴问题

给父元素添加display:flex;

主轴默认是x轴,设置主轴(x轴)上子元素的排列 

justyfy-content:flex-start;(默认)

justyfy-content:flex-end;

justyfy-content:center;

justyfy-content:space-btween;

justyfy-content:space-around;  

侧轴(y轴)上子元素的对齐方式:

align-items:flex-start;

align-items:flex-end;

algn-items:center:

justify-content:center;  align-iteams:center;

---

给父元素添加 display:flex; flex-direction:colum;

主轴 换轴是y 轴,设置主轴(x轴)上子元素的排列 ;

justify-content:flex-start;(默认)  

justify-content:flex-end;      

justify-content:center;     

justyfy-content:space-btween;    

justyfy-content:space-around;   

侧轴(x轴)上子元素的对齐方式:

align-items: flex-start;        

align-items: flex-end;     

algn-items:center;            

justify-content:center; align-items:center;         

---

移动端底部问题

思路:

1. 采取固定定位;不占位脱离文本流; position:fixed; bottom:0;   所以要设置宽度 width:100%;
2. 每部分可以flex:1; 记得给父元素转行成flex布局;
3. 每一部分,转换成flex布局,换轴 (换成y轴为主轴),align-items:center; (x轴水平居中), justify-content:center; (y轴垂直居中);      ( text-align:center; line-height=盒子高度也可以)
4. 调整细节; 字体大小,颜色 字体图标属于字体; font-size= line-height 可以消除文字的默认上间隙

 

      

         
        
首页
      
      

        
        
发现
      
      

        
        
我的
      
      

        
        
下载
      
    

---

banner图问题

flex布局
banner图 问题
banner的父元素不设置宽度 高度 ,

给banner图 设置width:100%; 等比列放大;   height:100%;

---

小图片和文字问题;

小图片和文字 用img+p;  父元素 把他们包含, 只给父元素设置宽度, 小图片只设置 width:100%;自动等比列缩放;
 文字p只设置 字体大小,颜色等;
然后 父元素 用margin上下值 控制上下距离;

---

主内容区滚动问题

给内容区设置flex:1;   overflow:auto; (独占一份,溢出隐藏显示滚动条;)

给内容区的父元素,body设置弹性布局,disaplay:flex; 再换主轴为y轴, flex-direction:column;