你们等了很久的弹性布局(flex),还不快来~!

传统的布局方案中,我们基本都是在基于盒模型,依赖dispaly(显示)、position(定位)以及float(浮动)等属性来操作。但是这些操作需要用到一些特殊的布局上就会显得不方便了,比如,我们最常见的模块垂直居中的实现就不是很容易。而正是针对这些不易实现的布局,我们今天就跟大家分享一种简单好用的布局方式——弹性布局(flex),一起来学习吧~~~

flex布局的由来

flex是flexible box的缩写,意思是“弹性布局”,用来为操作盒模型提供丰富的灵活性。早在2009年,W3C就已经提出这种简单、完整、响应式实现各种页面的布局。目前来说,大部分的浏览器也已经得到了兼容,大家可以安全的去使用了。浏览器兼容如下:

什么是flex布局

flex布局定义

flex布局能更加轻松地实现复杂网页布局,并且可以在屏幕和浏览器窗口大小发生变化时进行调整以保持元素的相对位置和大小(即响应式操作)。

采用flex布局的元素,称为flex容器(flex container),简称“容器”。页面中的任何一个容器(标签)都可以指定为flex布局,例如:.box {display: flex;}。容器中所有的子元素自动成为容器成员,称为flex项目(flex item),简称“项目”。

注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

flex布局表现形式

flex容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿着主轴排列,即水平排列,效果图如下:

flex的容器属性

常用的容器属性有flex-direction(排列)、flex-wrap(换行)、flex-flow(属性合写)等。

flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

书写形式:flex-direction: row | row-reverse | column | column-reverse; 主要属性值介绍如下:

  • row(默认值):主轴为水平方向,起点在左端;
  • row-reverse:主轴为水平方向,起点在右端;
  • column:主轴为垂直方向,起点在上沿;
  • column-reverse:主轴为垂直方向,起点在下沿。

代码案例如下:属性值使用与效果展示:

.wrap {
    display: flex;
    flex-direction: row/row-reverse/column/column-reverse;
    width: 750px;
    height: 100px;
    margin: 100px auto;
}
.wrap p {
    border: 1px solid red;
}
<div class="wrap">
    <p>flex-direction属性决定主轴的方向</p>
    <p>flex-direction属性决定主轴的方向</p>
    <p>flex-direction属性决定主轴的方向</p>
</div>

代码案例效果展示:

flex-wrap属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

书写形式:flex-wrap: nowrap | wrap | wrap-reverse; 主要属性值介绍如下:

  • nowrap(默认):不换行;
  • wrap:换行,第一行在上方;
  • wrap-reverse:换行,第一行在下方。

代码案例如下:属性值使用与效果展示:

.wrap {
    display: flex;
    flex-wrap: wrap/wrap-reverse;
    width: 300px;
    height: 60px;
    margin: 30px auto;
}
.wrap p {
    border: 1px solid red;
}
<div class="wrap">
    <p>flex-wrap决定了新行堆叠的方向第一行</p>
    <p>flex-wrap决定了新行堆叠的方向第二行</p>
    <p>flex-wrap决定了新行堆叠的方向第三行</p>
</div>

代码案例效果展示:

flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。属性的介绍参看上面的两个属性,此处不再赘述,仅说明下属性的写法。

默认值为row(水平左方向) nowrap(不换行)

书写如下:flex-flow: row nowrap;

flex的项目属性

常用的项目元素属性有flex-grow(放大比例)、flex-shrink(缩小比例)、flex-basis(主轴空间)、flex(属性合写)等。下面先来介绍这几个属性的概念以及写法,最后再合起来展示一个案例。

flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

书写形式:flex-grow: <值>;

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

书写形式:flex-shrink: <值>;

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小,此处书写负值无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间大小(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

书写形式:flex-basis: <值>

此属性的值可以设为跟width属性一样的值,px、%都支持。

flex属性

flex属性是flex-grow、flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选。

该属性的在介绍如下表:

接下来就通过一个案例来复习并巩固弹性布局中所有的属性的使用吧,下面的这个案例是一个网站的基本结构,实现了在浏览器大小变化下的响应式布局,这也是当前很多网站的一个实现方式,一起来写吧~

html, body {
    font-family: "Arial";
    font-size: 20px;
    background: #EDEDED;
}
#flexContainer {
    display: flex;
} 
.wrap header  {
    background: #707070;
    min-height: 100px;
    margin: 3px;
    padding: 3px;
}
.wrap nav {
    background: #C9BFBF;
    flex: 1 1 15%;
    min-width: 150px;
    margin: 3px;
    padding: 3px;
}
.wrap aside {
    background: #C9C9C9;
    flex: 1 1 15%;
    min-width: 150px;
    padding: 3px;
    margin: 3px;
}
#content {
    min-height: 800px;
    background: #ABABAB;
    flex: 2 1 70%;
    margin: 3px;
    padding: 3px;
}
.wrap footer  {
    background: #707070;
    min-height: 50px;
    margin: 3px;
    padding: 3px;
}
@media all and (max-width: 640px) {
    #flexContainer {
        flex-flow: column wrap;
    }
    .wrap header {
        min-height: 75px;
    }
 
    .wrap nav {
        min-height: 50px;
        order: 1;
    }
    .wrap aside {
        min-height: 50px;
        order: 2;
    }       
    #content {
        min-height: 725px;
        order: 3;
    }
    .wrap footer {
        min-height: 25px;
    }
}
<div class="wrap">
    <header>header</header>
    <section id="flexContainer">    
        <nav>navigation</nav>
        <section id="content">section</section>
        <aside>aside</aside>
    </section>
    <footer>footer</footer> 
</div>

全屏浏览器(1920px)下展示的效果:

浏览器的大小拖放到640像素以下的展示效果如下:

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-11-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【Web动画】SVG 线条动画入门

1202
来自专栏数据小魔方

动态图表12|滑块(函数+名称管理器)

今天要跟大家分享的是动态图表12—滑块(函数+名称管理器)! 今天要讲的这篇与前一篇的步骤基本一致,但是所用到的控件工具有所不同。 步骤: 插入滑块(设置数据...

3054
来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

733
来自专栏HTML5学堂

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂:在前一篇文章当中,我们讲解了SVG的基本知识,并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲...

34817
来自专栏HTML5学堂

CSS3渐变,就是这么玩

HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计...

3065
来自专栏小巫技术博客

A015-布局之Linearlayout

704
来自专栏Bingo的深度学习杂货店

常见的布局实现

本章主要介绍常见的布局实现,包括: ---- [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 ---- [1] 两列布局 子列固定宽度(设...

2886
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(下)

线条动画 SVG 中的线条动画常常用作过渡屏(splash screen)中。例如:一些比较炫酷的 LOGO 和 炫酷的效果,大家有没有动心想学一学,看看自己到...

2170
来自专栏从零开始学自动化测试

appium+python自动化24-滑动方法封装(swipe)

一、swipe介绍 1.查看源码语法,起点和终点四个坐标参数,duration是滑动屏幕持续的时间,时间越短速度越快。默认为None可不填,一般设置500-1...

3764
来自专栏知晓程序

小程序开发必看!一篇文章让你了解 Flex 布局 | 小程序学院

1114

扫描关注云+社区