flexbox布局是一种新的css布局,flex是flexible的简写,所以flexbox就可以理解为可伸缩布局。而可伸缩性也是flexbox布局的亮点,至于如何可伸缩,看完下面的介绍大家应该就会有自己的认识。

  一.flexbox布局的历史

  flexbox布局分为三个阶段,分别是最老版本,过渡版本和标准版本,其中标准版本是最新的版本。这几个版本除了语法上的改变以外,最大的不同是对浏览器的支持覆盖,其中过渡版本只支持ie10。但是更令人匪夷所思的是w3c上面对flexbox的介绍正好是这个只支持ie10的版本。下面我只介绍第三阶段的语法。

  二.felxbox体验

  试想以前我们需要实现一个元素在父元素的居中,会怎么做?最常见的做法应该是如下代码

  

  这种方式有几个缺点,1是太麻烦,要计算偏移量。二是不准确,正因为每次要计算,那么元素比较复杂时很可能出错。三是元素脱离文档流,因为使用了绝对定位。

  接下来看flexbox是如何实现居中

  可以看到flexbox布局实现居中核心只有三行代码,将display设置为flex(这个是前提,只有设置了display属性才能使用flexbox布局),justify-content是设置水平居中,align-items设置垂直居中。

  三.align-items属性

  先看一下align-items属性,它是加在父元素的样式,作用在子元素身上。  

flex-start:

弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

flex-end:

弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

center:

弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

baseline:

如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

stretch:

如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

flex-start,flex-end和center很容易理解,至于baseline没有用过,我理解应该和flex-start是一样的。下面介绍一下stretch,先看代码吧!

上面是实现的效果,stretch从字面理解是拉伸的意思,其实他就是做的拉伸的效果。这个属性也是定义在父元素上,作用在子元素上,实现的效果会让子元素一行排列,最重要的是会让子元素的高度一致,高度是这一行最高的一个元素。这个属性可以用到那些场景呢?我在这里举一个例子,如下:

  上面这个场景是实现多个宽度高度相同的区块,我们会设置区块的宽度和高度。这样做不好的地方时,如果区块内容增加,可能会挤出区块,那么我们只能通过改变代码来调整。而flexbox布局很容易解决这个烦恼,只需要将align-items属性设置为stretch就ok了。

  四.justify-content属性。

flex-start:

弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

flex-end:

弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

center:

弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。

space-between:

弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。

space-around:

弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

  和align-items属性一样,justify-content属性也有flex-start,flex-end,center这三个值,很好理解,不再做解释。主要想介绍一下space-between和space-around这两种情况。还是先看代码和效果
  
  
  可以看到设置为space-beween的时候,父元素的剩余空间会被等分作为子元素之间的距离。而设置为space-around时,子元素之间的距离也是相等的,不过第一个元素和最后一个元素和边缘有了一定的距离,而这个距离是等于子元素间距的一半,这就是space-around的作用。个人觉得space-around这种情况应用场景不多。
  以上就是flexbox的一个简单地入门,下一次我会分享一些更加深入的东西。

flexbox布局一的更多相关文章

  1. flexbox布局神器

    前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...

  2. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

  3. Flexbox布局(转)

    Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防 ...

  4. 互动教程,让你5分钟掌握 Flexbox 布局模式

    Flexbox 布局模块目前是 W3C 候选标准,旨在提供一个更有效的方式进行布局,对齐和为容器里的项目分配空间,即使它们的大小是未知的或者动态的.这里分享一个基于 Knockout.js 构建的互动 ...

  5. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  6. flexbox布局的兼容性

    http://ayqy.net/blog/flexbox布局的兼容性/ 写在前面 flex布局早在2009年就有了,而现在是2015年6月8日,使用最新的flex语法会发现支持程度并不好,即使是在“高 ...

  7. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  8. CSS3之Flexbox布局

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...

  9. 三分钟学会CSS3中的FLEXBOX布局

    原文地址,保护版权,请勿转载:http://page.factj.com/blog/p/2574 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现 ...

  10. flexbox布局模式-- 浅谈

    简介 Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.今天主要从以下几个方面简单谈谈flex. 1 版本更迭 2 flex容器 3 flex项目 4 fle ...

随机推荐

  1. Oracle修改数据文件路径

    更改Oracle数据文件名及数据文件存放路径 SQL> select * from v$dbfile;      FILE# NAME---------- ------------------- ...

  2. githup上传项目到仓库

    1.有了自己的账号 2.创建一个新的项目,填写项目名称,描述 填写完成点击create repository 3.复制生成的https链接接下来用到 4.进入到你的项目所在目录右键git bash打开 ...

  3. win10 + VS2015 编译 ARPACK

    step 1: 下载ARPACK , mingw-w64-install 和 mingw-get-inst-20120426.exe: step 2: 安装 MinGW-64默认安装路径即可. ste ...

  4. 数据结构---Java---String

    1.概述 1.1 源码(JDK1.8) public final class String implements java.io.Serializable, Comparable<String& ...

  5. JavaSE---多线程---Callable、Future

    1.概述 1.1 JDK1.5后,Java提供了Callable接口,该接口提供一个call方法作为线程执行体,该call方法可以  有返回值.声明抛出异常: 因此,我们可以直接将Callable接口 ...

  6. string.format()详解

    java中: 从 Java 5.0 开始,String 类新增了一个强大的字符串格式化方法 format().这个方法到现在用的人还是不多,实在是一种浪费.本文带你快速过一遍这个方法的功能,将来你要用 ...

  7. localstorage sessionstorage和cookie的区别

    基本概念 cookie:是网景公司的前雇员在1993年发明.它的主要用于保存登陆信息,比如登陆某个网站市场可以看到'记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的. sess ...

  8. 【leetcode】421. Maximum XOR of Two Numbers in an Array

    题目如下: 解题思路:本题的难点在于O(n)的复杂度.为了减少比较的次数,我们可以采用字典树保存输入数组中所有元素的二进制的字符串.接下来就是找出每个元素的异或的最大值,把需要找最大值的元素转成二进制 ...

  9. ansible_playbook语法中的循环语句归纳

    种类一.标准循环添加多个用户 - name: add several users user: name={{ item }} state=present groups=wheel with_items ...

  10. 为何使用Html5+CSS3

    一:大多浏览器支持,低版本也没问题 我看点这方面的资料,是为了做手机应用网站(有三个方案,这个是备用方案),可以开发响应式网站,可以脱离开发平台进行跨平台. 在Html5网页中引入Modernizr, ...