Flexbox布局指南

Flexbox布局概念

Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防止内容溢出,确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易,可以使用更少的代码,更简单的方式实现更复杂的布局,例如对齐方式,排列方向,排列顺序(这也是Flexbox布局的核心能力所在),弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。

不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局,弹性盒布局的算法是方向无关的。 虽然块级元素布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局,弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

基本概念

Flexbox是一个完整的布局模块,不是单一的属性,设计的属性有很多。Flexbox布局主要由父容器和它的直接子元素组成,其中父容器被称之为flex container(flex容器),而其直接的子元素称作为flex item(flex元素)。

Flexbox布局按照宽和高涉及的基本概念名称有main axis(主轴)和cross axis(交叉轴,和主轴垂直),主轴起点边称为main start,主轴终点边称为main end,交叉轴起点边称为cross start,交叉轴终点边称为cross end。如图:

  • main axis(主轴):Flex容器的主轴主要用来排列Flex元素。它不一定是水平,这主要取决于flex-direction属性。
  • main-start(主轴起点边) | main-end(主轴终点边):Flex元素的排列从容器的主轴起点边开始,往主轴终点边结束。
  • main size:Flex元素的在主轴方向的宽度或高度就是项目的主轴长度,Flex元素的主轴长度属性是widthheight属性,由哪一个对着主轴方向决定。
  • cross axis(和主轴垂直交叉的轴):与主轴垂直的轴称作交叉轴。
  • cross-start(交叉轴起点边) | cross-end(交叉轴终点边):伸缩行的排列从容器的交叉轴起点边开始,往交叉轴终点边结束。
  • cross size:Flex元素的在交叉轴方向的宽度或高度就是项目的交叉轴长度,Flex元素的交叉轴长度属性是widthheight属性,由哪一个对着交叉轴方向决定。

在具体属性开始之前还是要注意几点:

  • Flexbox 在最终形成今天的规范之前,历经了三次迭代。每一次迭代都伴随着不同的属性名,在不同浏览器下有着相应的特定前缀。而现在,我们所处在这样的时刻,所有的浏览器都支持无前缀的终极规范,但是想要兼容低版本的浏览器还有很多坑要填。正因如此,我强烈建议你按照 flexbox 的最终规范编写代码,并且使用最新的浏览器进行测试,然后再去实现向前兼容。想要让你编写的代码同时兼容所有的浏览器是一件很头疼的事。
  • 尽管 flexbox 可以和其它的 CSS 布局系统一同工作,但是在开始使用新的系统之前,丢掉以前在 web 布局中的假设和实践很重要。这是一种全新的工作方式,如果坚持以前的思维,你将受到阻碍。
  • 你可能偶尔听到“flexbox 是用来干啥干啥的”。诚然,其它的布局系统会很快的补充上 flexbox——比如 grids 和 regions,但这种称述并不完全准确。CSS 不是语义化的,没有哪一个 CSS 特性就是固定做某件事情的。你可以使用任意的 CSS 来完成你的需求;唯一的问题是什么样的代码才能更高效的实现目标。正如我们看到的,flexbox 解决了设计者在布局上正面临的诸多问题。
  • Flexbox 以前的几个版本给现在的开发者们带来了一些风险:很可能读到一篇没有指明书写时间的文章,最后发现自己正在看 2009 年的 flexbox 规范说明(现在已经废除)。所以,时刻谨慎小心,提高警惕。

如果需要了解基本元素和使用原理的可以http://blog.csdn.net/xiangzhihong8/article/details/52497004

来看一个实际例子:

首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现。

<style>
    .container{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
    .box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top:-50px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

假如使用了flex后,实现起来就简单了,而且不需要自己去算,也不需要绝对定位,只需要通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方式为center。

<style>
	.container{
	    width: 600px;
	    height: 400px;
	    border: 1px solid #000;
	    display: flex;
	    justify-content:center;
	    align-items:center;
	
	}
	.box{
	    width: 200px;  //宽度可以为任意
	    height: 100px; //高度可以为任意
	    border: 1px solid #000;
	
	}
</style>
<div class="container">
    <div class="box"></div>
</div>

其实flex的优点并不止这些,我们来看一张图 。

这里的具体元素等以后可以慢慢道来。

参考:

http://web.jobbole.com/86488/

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

不懂CSS的后端难道就不是好程序猿?

  由于H5在移动端的发展如日中天,现在大部分公司对高级前端需求也是到处挖墙角,前端薪资也随之水涨船高,那公司没有配备专用的前端怎么办呢?   作为老板眼中的“...

22790
来自专栏前端那些事

把所有的东西都对齐吧 - 谈谈垂直居中的解决方案

"44年前我们就把人类送上了月球了,但现在我们仍然无法在css中实现垂直居中 -James Anderson" 难题 在CSS中对元素进行水平居中是非常简单的...

30260
来自专栏Coco的专栏

不可思议的混合模式 background-blend-mode

19850
来自专栏自动化测试实战

flask第35篇——模板项目实战(一)

上面代码综合了之前学过的知识,包括:flask for 循环、set模板赋值其余都是前端的内容,这里不做过多的阐述。

14440
来自专栏菜鸟前端工程师

html+css学习笔记002-盒子模型

怕的不是我们不懂英文 怕的不是我们不懂操作电脑 怕的更不是我们不懂基础程序语言

18220
来自专栏用户2442861的专栏

应不应该使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?

24710
来自专栏我和我大前端的故事

哪些你知道或不知道的css,在这里或许都齐全 css编码技巧 css小技巧

暑假实习的时候带我的师傅,告诉我要注重基础,底层实现原理。才能在日新月异的技术行业站住脚跟,以不变应万变,万丈高楼平地起,所以我们应该不断的去学习,去交流。交流...

15210
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text

50840
来自专栏前端说吧

mask遮罩层的华丽写法

21020
来自专栏Coco的专栏

不可思议的混合模式 background-blend-mode

20130

扫码关注云+社区

领取腾讯云代金券