css3 flex弹性布局总结

本文涉及内容如下: flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器,但属性实在太多让人无从下手,因此将自己所学的知识做个总结。

基本概念

flexbox是Flexible Box的缩写,译为弹性布局。flex 布局主要是让容器中的子项目可以根据配置改变自身的宽高及顺序,以最佳的方式填充容器,达到弹性的目的。容器有横轴和纵轴来划分容器,横轴默认为水平方向纵轴为垂直方向。 ![图片描述][1]

容器属性

容器属性用来控制布局的整体大方向。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

flex-direction属性决定主轴方向(即项目的排列方向)。 row | row-reverse | column | column-reverse code demo preview

flex-wrap

该属性用来控制,当容器的主轴方向放不下所有项目时该如何处理。wrap | wrap-reverse | no-wrap, no-wrap 为默认值。 code demo preview

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写,你要是记不住也不必强求。默认值为row nowrap。

justify-content

justify-content定义子项目在主轴上的对齐方式。可以联想下 text-align。flex-start | flex-end | center | space-between | space-around 需要注意的是:space-around的两边的边距要比中间的边距要小一些。 code demo preview

align-items

justify-content定义子项目在纵轴上的对齐方式。 flex-start | flex-end | center | baseline | stretch code demo preview

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

也就是说只有当 wrap生效时,该属性才有存在的意义。flex-start | flex-end | center | space-between | space-around | stretch code demo preview

项目属性

项目属性用来控制容器中的项目自身的位置和伸缩。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

order 用来控制 flex 项目自身的摆放顺序,默认值为0,可以为负数,值越小项目越靠前摆放。 code demo preview

flex-grow

flex-grow控制项目的放大比例,默认为0,不放大。值得注意的是放大的比例是相对于剩余的空间而言,而不是项目自己的大小。 code demo preview

flex-shrink

flex-shrink 与 flex-grow 类似,主要用来控制项目的缩小比例,默认值为1,同比缩小。 code demo preview flex-grow 和 flex-shrink 都是按照剩余空间进行放大缩小的,而不是自身。大家记住瘦死的骆驼比马大。

flex-basis

flex-basis 很好理解,若横轴是主轴,flex-basis 可以当做 width 来使用;若纵轴是主轴,flex-basis 可以当做 height 来使用。个人感觉 flex-basis width 和 height 更灵活。

flex

flex 属性是 flex-grow flex-shrink flex-basis 三个属性的缩写。同样的原则,为了不增加大家的学习难度,不会不必强求。今天只向大家解释一下 flex: 1;当 flex的值为整数是它代表 flex-grow: 数值; flex-shrink采用默认值1;flex-basis:为0%。

.item {flex: 1;}.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;}

那么大家思考一下flex: 2;等同于什么?

.item {flex: 2;}.item {
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0%;}

align-self

align-self控制自身在侧重的对齐方式,和容器属性 align-items 类似,当然了,优先机肯定是高于他的爸爸的。auto | flex-start | flex-end | center | baseline | stretch code demo preview

以上项目的属性和练习也完成了,接下来使用 flex 布局实现我们日常工作中常见的三个需求。

实战

实现等宽布局,即使项目被删除和添加也不需要更改 css 的代码,常用来实现导航code demo preview 垂直水平居中,该需求是特别常见的使用 flex 特别容易。code demo preview 等高布局,当左右两个框的高度不定时,我们可以考虑使用 flex 实现。code demo preview

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

43360
来自专栏我爱编程

初识HTML5

客观地讲,没有不好的技术,只有没有用好的技术。JavaScript 的坎坷遭遇让我不禁想起了另一种被人们滥用的技术:Adobe公司研发的 Flash。

22620
来自专栏练小习的专栏

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

24260
来自专栏Android机动车

自定义View之客服好评View

这个版本主要的任务就是完成环信客服系统的集成,上一篇文章 仿IOS下载View 也是这个版本开发需求中的一小部分,那今天介绍一下另一个小需求 客服好评。 客服好...

14150
来自专栏coding for love

CSS入门

大家都知道,学习前端,有三大神器,html+css+js。如果用武学来比喻,html就好像骨架身躯,学习html就是习武之人所谓的打熬身体,身体底子好,习武才能...

9120
来自专栏狮乐园

interview record 20160822

问了一些列范围超级广的问题,不过我感觉大部分问题的答案,面试官还是比较满意的,有一些小问题没有答上来,我觉的并不是因为自己没有能力,其实就是所谓的“约书亚树”道...

10030
来自专栏Thinks

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

16820
来自专栏Thinks

谈响应式web设计代码实现

在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

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

《写给大家看的设计书》摘要与总结

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

8130
来自专栏IMWeb前端团队

rem不是神农草,治不了移动端百病

有很多朋友一聊起做移动端重构,第一个问题就是用什么单位合适。%,还是rem?(如果你还不太了解rem是什么单位,可先前往CSS3的REM设置字体大小了解。) 然...

229100

扫码关注云+社区

领取腾讯云代金券