标签：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属性，表示子项目占有剩余空间的的份数,定义子项目占有多少份，属性值是数值类型，注意一下这个里面是平均分配的。
• 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