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

相关文章

来自专栏web

关于border边框重叠颜色设置问题

1474
来自专栏互联网开发者交流社区

HTML超文本标记语言-基础标签整理

1294
来自专栏一“技”之长

标签之美二——文本标签 原

定义字体大小:size  例如<font size="4"></font>设置其中文字字号为4。

522
来自专栏肖洒的博客

前端入门学习--CSS

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 ...

982
来自专栏代码世界

前端之CSS内容

一、CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档...

31110
来自专栏九彩拼盘的叨叨叨

Grid 布局写法示例

Grid 可以简便、完整、响应式地实现各种页面布局。它比 Flex 布局功能更强大。

702
来自专栏我就是马云飞

仿bilibili刷新按钮的实现

简述 最近跟小伙伴一起讨论了一下,决定一起仿一个BiliBili的app(包括android端和iOS端),我们并没有打算把这个项目完全做完,毕竟我们的重点是掌...

1968
来自专栏黑泽君的专栏

day01_html学习笔记

871
来自专栏一“技”之长

Bootstrap响应式前端框架笔记八——按钮组

    在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处...

632
来自专栏极乐技术社区

wxss学习《四》字体,组件及API的思维导图

一:字体 一.字体:font。设置对象的文本特性。 1.font-style:文字样式。 取值:normal 正常的字体, italic 斜体字, o...

18810

扫码关注云+社区