轻松pick移动开发第一篇，flex布局
一、什么是flex布局
首先提问两个问题，一般童鞋都会让子元素水平居中，那么怎么让子元素垂直居中呢？怎么在不设置padding和margin值且不浮动的情况下，对页面元素进行自由布局呢？这个时候我们的flex布局就该大展身手了。
1.flex 是 flexible Box 的缩写，意为"弹性布局"（也叫伸缩布局 、伸缩盒布局），用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
2.当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。为什么呢？因为flex布局可以让子元素一行显示，不需要浮动，所以就不需要清除浮动。
3.采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
4.实现方法：简单说就是通过给父盒子添加display:flex属性，子盒子添加flex: 数字（或百分数）属性，及其他属性来控制子盒子的位置和排列方式。
简单吧？不要急，下面说一说父盒子和子盒子各属性及实现的效果。
二、父项常见的属性
（为了不显得啰嗦，就简述属性的作用，后面用案例展示，具体属性值参考api）
1.flex-direction：设置主轴的方向 。（默认主轴为x轴,属性column表示主轴为y轴）
2.justify-content：设置主轴上的子元素排列方式。（常用属性：center、space-around、space-between）
3.flex-wrap：设置子元素是否换行。（默认不换行,属性wrap表示换行）
4.align-content：设置侧轴上的子元素的排列方式（多行）。（常用属性：center、space-around、space-between）
5.align-items：设置侧轴上的子元素排列方式（单行）。（常用属性：center）
6.flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap。
三、子项常见属性
1.flex：子项目占的份数。（数字或百分数）
2.align-self：控制子项自己在侧轴的排列方式（不常用）。
3.order：属性定义子项的排列顺序（前后顺序，不常用）。
四、终于到了案例环节
1.案例一：设置主轴为y轴且子元素平分父元素
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置主轴为y轴且子元素平分父元素</title>
<style>
.father{
display: flex; /* 给父盒子设为flex布局 */
flex-direction: column; /* 设置主轴方向为y轴，即子盒子沿y轴排列 */
width: 300px;
height: 300px;
background-color: pink;
margin:0 auto;
}
.son{
flex: 1; /* 因为三个子盒子每个占父盒子的1份，所以平分父盒子剩余空间 */
width: 60px; /* 当主轴为y轴时给宽不给高，因为高度是占父盒子的份数 */
margin: 10px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<!-- 父盒子采用flex布局后，即使子盒子是行内元素也可直接设置宽高 -->
<a href="#" class="son">1</a>
<a href="#" class="son">2</a>
<a href="#" class="son">3</a>
</div>
</body>
</html>
效果图：
2.案例二：伸缩盒中导航栏实例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伸缩盒中导航栏实例</title>
<style>
*{
margin: 0;
padding: 0;
}
nav{
width: 540px;
background-color: #333;
margin: 0 auto;
border-radius: 5px;
}
ul{
display: flex; /* 给ul添加flex属性，作弹性容器*/
list-style: none;
}
nav li{
flex: 1; /* 每个li平分ul宽度 */
padding: 8px 0;
}
nav a{
display: flex; /* 给a添加flex属性，作弹性容器 */
flex-direction: column; /* 主轴为y，设置a中子元素span沿y轴排列 */
align-items: center; /* 侧轴为x，设置a中子元素span沿侧轴x居中 */
text-decoration: none;
color: #fff;
}
.pic{
width: 32px;
height: 32px;
border-radius: 16px;
background-color: orange;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">
<span class="pic"></span>
<span>川菜</span>
</a>
</li>
<li>
<a href="#">
<span class="pic"></span>
<span>湘菜</span>
</a>
</li>
<li>
<a href="#">
<span class="pic"></span>
<span>粤菜</span>
</a>
</li>
<li>
<a href="#">
<span class="pic"></span>
<span>小吃</span>
</a>
</li>
<li>
<a href="#">
<span class="pic"></span>
<span>外卖</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
效果图：
五、总结
尝试过flex的用法后，我们来总结一下flex与传统布局的对比。
flex布局：操作方便，布局极其简单（省略了大量的边距测量工作，且可以垂直居中等），移动端使用比较广泛。但是由于是css3的内容，所以pc端浏览器支持情况比较差。IE11或更低版本不支持flex或仅支持部分。
传统布局：兼容性好，但相比之下布局略显繁琐，有一定局限性，不能再移动端很好的布局。
所以，在实际开发中，如果是pc端页面布局，还是采用传统方式，如果是移动端或者是不考虑兼容的pc则采用flex。
轻松pick移动开发第一篇，flex布局的更多相关文章
- 轻松pick移动开发第二篇，rem布局
一.为什么要使用rem布局 前面我写了flex布局的优点,分配伸缩盒容器中子盒子占的份数及排列方式,使其不受屏幕缩放的影响,使布局变得简单.然而,在有些时候,不可避免要给盒子设置高度的值,怎么让高度也 ...
- iOS开发——高级技术精选&底层开发之越狱开发第一篇
底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...
- Android百度地图开发-第一篇：申请、搭建百度地图
一.前言 这是第一篇关于Android使用百度地图的学习记录,主要记录: 1.在百度地图开发者平台上申请API Key. 2.在自己的应用中加入百度地图的Android版SDK. 3.在自己的应用中显 ...
- 小白入门篇:flex布局
--前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...
- 移动Web开发-WebApp（flex布局+移动端导航案例）
实际开发中的像素:css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2缩放改变的是css像素大小PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/ ...
- Swift开发第一篇——异常处理及断言
本篇分两部分: 1.错误和异常处理 2.Swift 中的断言 1.错误和异常处理 在 OC 开发中,我们通常会将 error 置为 nil NSError *error; BOOL success = ...
- android 串口开发第一篇:搭建ndk开发环境以及第一个jni调用程序
一:ndk环境搭建 1:开发环境 我使用的是android studio 2.3.3版本,搭建ndk开发环境比较简单,打开File----Settings----Appearance&Beha ...
- PowerBI开发 第一篇：设计PowerBI报表
PowerBI是微软新一代的交互式报表工具,把相关的静态数据转换为酷炫的可视化的,能够根据filter条件,对数据执行动态筛选,从不同的角度和粒度上分析数据.PowerBI主要由两部分组成:Power ...
- Python开发 第一篇 python的前世今生
Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
随机推荐
- 从0系统学Android-2.3使用 Intent 在 Activity 之间穿梭
2.3 使用 Intent 在 Activity 之间穿梭 在上一节中我们已经学会了如何创建一个 Activity 了.对于一个应用程序来说,肯定不可能只有一个 Activity.下面就来学习多个 A ...
- C#4.0新增功能04 嵌入的互操作类型
连载目录 [已更新最新开发文章,点击查看详细] 从 .NET Framework 4 开始,公共语言运行时支持将 COM 类型的类型信息直接嵌入到托管程序集中,而不要求托管程序集从互操作程序集中 ...
- Simple TPU的设计和性能评估
深度学习飞速发展过程中,人们发现原有的处理器无法满足神经网络这种特定的大量计算,大量的开始针对这一应用进行专用的硬件设计.谷歌的张量处理单元(Tensor Processing Unit,后文简称TP ...
- gawk(awk)的用法案例
gawk(awk)的用法案例 本文首先简单介绍一个gawk和awk的区别,然后是一点基本使用流程,最后是自己做的一个分析数据文件的脚本代码,供大家参考.另外想了解基本流程的入门知识的可以下载附件pdf ...
- IDEA创建普通java和web项目教程
1.第一个javaSE项目 01.双击idea运行IDE 02.配置JDK 03.创建项目的workspace .iml文件里面是当前项目的一些配置信息! 相当于web项目中的web.xml文件 04 ...
- Active Directory域
引言 在 Microsoft® Windows® 2000 Server 操作系统的诸多增强功能中,Microsoft Active Directory™ 功能的引入意义最为重大,但也最常引起困惑.与 ...
- 【iOS】stringWithFormat 保留小数点位数 float double
以前就见过,如下: text = [NSString stringWithFormat:@"%.1f", percentageCompleted]; 但一直没在意.刚一时好奇,查了 ...
- 跟着阿里p7一起学java高并发 - 第19天：JUC中的Executor框架详解1，全面掌握java并发核心技术
这是java高并发系列第19篇文章. 本文主要内容 介绍Executor框架相关内容 介绍Executor 介绍ExecutorService 介绍线程池ThreadPoolExecutor及案例 介 ...
- darknet是如何对数据集做resize的?
在准备数据集时,darknet并不要求我们预先对图片resize到固定的size. darknet自动帮我们做了图像的resize. darknet训练前处理 本文所指的darknet版本:https ...
- Golang高效实践之array、slice、map
前言 Golang的slice类型为连续同类型数据提供了一个方便并且高效的实现方式.slice的实现是基于array,slice和map一样是类似于指针语义,传递slice和map并不涉及底层数据结构 ...