一、什么是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布局的更多相关文章

  1. 轻松pick移动开发第二篇，rem布局

    一.为什么要使用rem布局 前面我写了flex布局的优点,分配伸缩盒容器中子盒子占的份数及排列方式,使其不受屏幕缩放的影响,使布局变得简单.然而,在有些时候,不可避免要给盒子设置高度的值,怎么让高度也 ...

  2. iOS开发——高级技术精选&底层开发之越狱开发第一篇

    底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...

  3. Android百度地图开发-第一篇：申请、搭建百度地图

    一.前言 这是第一篇关于Android使用百度地图的学习记录,主要记录: 1.在百度地图开发者平台上申请API Key. 2.在自己的应用中加入百度地图的Android版SDK. 3.在自己的应用中显 ...

  4. 小白入门篇:flex布局

    --前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...

  5. 移动Web开发-WebApp（flex布局+移动端导航案例）

    实际开发中的像素:css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2缩放改变的是css像素大小PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/ ...

  6. Swift开发第一篇——异常处理及断言

    本篇分两部分: 1.错误和异常处理 2.Swift 中的断言 1.错误和异常处理 在 OC 开发中,我们通常会将 error 置为 nil NSError *error; BOOL success = ...

  7. android 串口开发第一篇:搭建ndk开发环境以及第一个jni调用程序

    一:ndk环境搭建 1:开发环境 我使用的是android studio 2.3.3版本,搭建ndk开发环境比较简单,打开File----Settings----Appearance&Beha ...

  8. PowerBI开发 第一篇：设计PowerBI报表

    PowerBI是微软新一代的交互式报表工具,把相关的静态数据转换为酷炫的可视化的,能够根据filter条件,对数据执行动态筛选,从不同的角度和粒度上分析数据.PowerBI主要由两部分组成:Power ...

  9. Python开发 第一篇 python的前世今生

    Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

随机推荐

  1. 模拟用户登录，内含验证码验证和request等操作

    模拟用户登录,内含验证码验证和jsp等操作 1.案例需求: 1. 访问带有验证码的登录页面login.jsp 2. 用户输入用户名,密码以及验证码. * 如果用户名和密码输入有误,跳转登录页面,提示: ...

  2. 题解 P3811 【【模板】乘法逆元】

    P3811 [模板]乘法逆元 一个刚学数论的萌新,总结了一下这题的大部分做法 //一.费马小定理+快速幂 O(nlogn) 64分 #include<cstdio> using names ...

  3. [leetcode] 238. Product of Array Except Self (medium)

    原题 思路: 注意时间复杂度,分别乘积左右两边,可达到O(n) class Solution { public: vector<int> productExceptSelf(vector& ...

  4. 云计算：Linux运维核心管理命令详解

    云计算:Linux运维核心管理命令详解 想做好运维工作,人先要学会勤快: 居安而思危,勤记而补拙,方可不断提高: 别人资料不论你用着再如何爽那也是别人的: 自己总结东西是你自身特有的一种思想与理念的展 ...

  5. 研究分布式唯一ID生成，看完这篇就够

    很多大的互联网公司数据量很大,都采用分库分表,那么分库后就需要统一的唯一ID进行存储.这个ID可以是数字递增的,也可以是UUID类型的. 如果是递增的话,那么拆分了数据库后,可以按照id的hash,均 ...

  6. python基础——元组(tuple)

    Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. tuple1 = () tuple2 = ...

  7. 基于V2EX API的nodejs组件.

    今天又学习到了新的知(zi)识(shi),来给自己做个笔录,也算在这酷热的天气里给自己写了一篇降温的‘膏药’,话就讲这么多了 ,start off...... 首先 ,依赖选择: /**设置为严格模式 ...

  8. springBoot综合开发

    作者:纯洁的微笑出处:www.ityouknow.com 版权所有,欢迎保留原文链接进行转载:) 上篇文章介绍了Spring boot初级教程:spring boot(一):入门篇,方便大家快速入门. ...

  9. GitLab与Git的结合

    作为一名刚入职的大数据初级开发工程师,来到公司后发现代码是部署在GItLab上,之前一直认为代码可以放在码云.github上面,然后就很迷惑就对GitLab进行了了解,将git 和gitlab结合起来 ...

  10. 制造资源计划(Manufacturing Resource Planning,Mrp II)

        制造资源计划(Manufacturing Resource Planning,Mrp II)       概括: 以物料需求计划(MRP)为核心的企业生产管理计划系统,MRP II 是以工业工 ...