码迷,mamicode.com
首页 > 移动开发 > 详细

Web移动前端开发-——flex布局

时间:2020-02-25 20:25:16      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:direct   背景   play   掌握   微信   app开发   弹性盒   分配   linear   

常见的移动端布局方法-flex布局,很重要!!

其他的布局,你掌握也就ok了,但是这个布局,你一定要非常非常熟悉,因为我们后面的前段框架react 以及手机端混合app开发,微信小程序开发都是用的是这个布局。

我做了以一个仿 携程网的移动端首页,供你参考

flex布局原理

  1. 这个是“弹性盒子”布局,任何一个元素都可以指定flex布局,

  2. 注意:

    • 如果父盒子有flex那么子元素的,float clear vertical-align都会失效
    • 采用了flex元素,的被称为容器,我们的flex都是给父盒子的,flex指定之后,里面的子容器就是容器成员,项目flex item
    1. 原理:通过给父盒子添加flex属性,来控制里面的子盒子的排雷方式

flex布局常用属性

父项常见的属性

  1. 具有六个属性给我的父盒子
属性名 属性值 属性说明
flex-direction row,row-reverse,column,column-reverse 设置主轴的方向
justify-content flex-statr,flex-end,center,space-around,space-between 设置主轴上的子元素的排列方式
flex-wrap nowrap,wrap 设置子元素是否换行
align-content * 设置侧轴上的子元素的排列方式(多行)
align-items flex-stat,flex-end,center,stretch 设置侧轴上的子元素的排列方式(单行)
flex-flow * 复合属性,相当于同时设置了flex-direction和flex-wrap

详细的属性值和相关的说明:请你去参见字典,百度一下就行

子项常见的属性

  • flex属性,表示子项目占有剩余空间的的份数,定义子项目占有多少份,属性值是数值类型,注意一下这个里面是平均分配的。
  • align-self 控制子项目在侧轴的排列方式。其属性值是和align-item一样。
  • order 属性定义项目的排列,值越小越往前。
/*控制子项目在剩余空间里面的所占有的份数*/
/*在item的父级上面要给一个dispaly:flex;*/
.item {
    flex:3;
    /*注意一下 flex可以跟百分比%*/
    
}

仿携程网

通过代码,我们来展示核心功能

技术选型方案:单独的绘制页面,布局技术选型:flex布局

/*居中算法*/
.search-index {
    /*固定定位跟父亲没有关系,与屏幕为准*/
    position: fixed;
    top: 0;
    /*注意一下这个,居中显示的算法,不能写marign'-left,因为我们的宽度不是固定的,这个讲居中显示算法非常常用,*/
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    /*固定定位的盒子要有宽度*/
    width: 100%;
    height: 44px;
    /*限定大小*/
    min-width: 320px;
    max-width: 540px;
    background-color: pink;
    /*不能写margin 0 auto 因为固定的定位maing无效*/
}
/*常见的上下布局,这个布局非常的重要,你无论如何都要掌握*/

.local-nav {
    display: flex;
    height: 64px;
    margin: 3px 4px;
    background-color: #fff;
    border-radius: 8px;
}

.local-nav li {
    flex: 1;
}

.local-nav a {
    display: flex;
    /*主轴切换,由于是单行的,所以我们使用aligin-item就行*/
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.local-nav-icon {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

/*注意一下,我们的简化写法*/
/*利用属性选择器。简化结构*/
+++
.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}
+++
/* 背景线性渐变 */
/*linear-gradient(起始方向,颜色1 ,颜色2 ,....);
-webkit-linear-gradient(起始方向,颜色1 ,颜色2 ,....);
注意一下,这里额起始方向 可以是方位词 比如 left top*/
+++

+++

Web移动前端开发-——flex布局

标签:direct   背景   play   掌握   微信   app开发   弹性盒   分配   linear   

原文地址:https://www.cnblogs.com/BM-laoli/p/12363141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!