你们等了很久的弹性布局(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(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档...

31610
来自专栏Petrichor的专栏

opencv: 图片 设置 透明度 并 叠加(cv2.addWeighted)

2122
来自专栏黑泽君的专栏

day01_html学习笔记

1191
来自专栏mySoul

事件冒泡和传播

这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候,ie使用事件冒泡。(两个正好相反)这个时候w3c来了,为了...

1236
来自专栏企鹅号快讯

《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

北方的冬天最怕有风,空气虽然好了,但是异常的冷,吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题,看了几个网站发现很多网站的弹窗都是自定义的...

2569
来自专栏前端杂货铺

居中详解

 讲解 1,单行文本的居中:           <div class='center'><span>单行文本框居中</span></div>         ...

3359
来自专栏一“技”之长

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

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

552
来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

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

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

1724
来自专栏极乐技术社区

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

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

19610

扫码关注云+社区