你们等了很久的弹性布局(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 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

CSS基础

一、CSS简介 css概念     CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。     当浏览器读到一个样...

2578
来自专栏闻道于事

JavaScript事件与例子

事件,就是预先设置好的一段代码,等到用户触发的时候执行。 一:常见的事件: 1.关于鼠标的事件   onclick 鼠标单击触发   ondblclick 鼠标...

2657
来自专栏落花落雨不落叶

关于Html与css的一些解释

27712
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

37011
来自专栏前端儿

CSS常见兼容性问题总结

浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

1053
来自专栏前端杂货铺

定位浮动拾遗

---恢复内容开始--- 浮动元素处在正常文档流上的浮动流上,浮动元素的渲染方式很特殊,首先按照正常文档流进行布局,然后将该元素从 文档流中取出并对该元素尽量向...

2797
来自专栏老马寒门IT

03-移动端开发教程-CSS3新特性(下)

1. CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用,但是它有几个很大的局限。 transition需要事件触发,所以没法在网页加载时...

33713
来自专栏Android干货

CSS基本知识(慕课网)

3126
来自专栏搞前端的李蚊子

微信小程序web-view页面安卓下显示空白的解决办法!!!

web-view页面在你向地址拼接参数展示页面时,在安卓上有时会显示空白 解决方案: A: 普通不需要参数的话可以直接把地址写在src里,不要去在onLoad里...

4164
来自专栏木子昭的博客

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 ...

2629

扫码关注云+社区