CSS3弹性盒模型flexbox完整版教程

文章目录

基础知识

属性介绍

display: flex | inline-flex; (适用于父类容器元素上)

      • 请注意:
  • flex-direction (适用于父类容器的元素上)
  • flex-wrap (适用于父类容器上)
  • flex-flow (适用于父类容器上)
  • justify-content (适用于父类容器上)
  • align-items (适用于父类容器上)
  • align-content (适用于父类容器上)
  • order (适用于弹性盒模型容器子元素)
  • flex-grow (适用于弹性盒模型容器子元素)
  • flex-shrink (适用于弹性盒模型容器子元素)
    • 说明:
  • flex-basis (适用于弹性盒模型容器子元素)
  • flex (适用于弹性盒模型子元素)
    • 说明:
  • align-self (适用于弹性盒模型子元素)
  • 常用例子
    • 1.居中对齐
    • 2.自适应导航
    • 3.常见3栏移动优先布局
  • 相关属性
  • 其他资源
  • 浏览器支持
    • 这里提供一个Sass的函数帮助你理解

来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox。文中详细的介绍了新版的弹性盒子的相关属性,并且给出了几个使用例子。是新手入门flexbox的一个优秀教程。当然里面的内容也大部分是根据w3c的文章来写的。里面的每个属性都给出了一张示例图,非常容易理解。本人根据其思路,结合中文翻译,写出了一篇flexbox的完整教程,希望对大家有用。

弹性布局(flexible box)模块(目前是w3c候选的推荐)旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

最重要的是弹性盒子布局与方向无关,相对于常规的布局(块是垂直和内联水平为基础),很显然,这些工作以及网页设计缺乏灵活性,无法支持大型和复杂的应用程序(特别当它涉及到改变方向,缩放、拉伸和收缩等)。

注意: Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局。

  • 基础知识

由于flexbox是一个整体模块,而不是单一的一个属性,它涉及到了很多东西,包括它的整个属性集。它们之中有一些是在父容器上设置,而有一些则是在子容器上设置。

如果经常布局基于块和内嵌流方向,柔性布局基于“柔性流动方向”。请看看这个数字从规范,解释背后的柔性布局的主要思路。

基本上,项目将制定了以下任一主轴(从 main-start 到 main-end)或十字轴((从 cross-start 到 cross-end)。

  • 属性介绍

  • display: flex | inline-flex; (适用于父类容器元素上)

定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器。

  • box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(css3
  • inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3
  • flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
  • inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
  • flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
  • inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
  • 请注意:

1.css 列(CSS columns)在弹性盒子中不起作用

2.floatclear and vertical-align 在flex项目中不起作用

  • flex-direction (适用于父类容器的元素上)

定义:设置或检索伸缩盒对象的子元素在父容器中的位置。

flex-direction: row | row-reverse | column | column-reverse
  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • row-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

flex生效需定义其父元素display为flex或inline-flex(box或inline-box,这是旧的方式)

演示:flex-direction

  • flex-wrap (适用于父类容器上)

设置或检索伸缩盒对象的子元素超出父容器时是否换行。

flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap:当子元素溢出父容器时不换行。
  • wrap:当子元素溢出父容器时自动换行。
  • wrap-reverse:反转 wrap 排列。

演示:flex-wrap

  • flex-flow (适用于父类容器上)

复合属性。设置或检索伸缩盒对象的子元素排列方式。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>
  • [ flex-direction ]:定义弹性盒子元素的排列方向。
  • [ flex-wrap ]:定义弹性盒子元素溢出父容器时是否换行。

演示:flex-flow

  • justify-content (适用于父类容器上)

设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进行控制。

justify-content: flex-start | flex-end | center | space-between | space-around
  • flex-start:弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
  • flex-end:弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
  • center:弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。
  • space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于‘flex-start‘。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。
  • space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于‘center‘。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

演示:justify-content

  • align-items (适用于父类容器上)

设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
  • center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
  • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与‘flex-start‘等效。其它情况下,该值将参与基线对齐。
  • stretch:如果指定侧轴大小的属性值为‘auto‘,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照‘min/max-width/height‘属性的限制。

演示:align-items

  • align-content (适用于父类容器上)

设置或检索弹性盒堆叠伸缩行的对齐方式。

align-content: flex-start | flex-end | center | space-between | space-around | stretch
  • flex-start:各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。
  • flex-end:各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。
  • center:各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。)
  • space-between:各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于‘flex-start‘。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。
  • space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于‘center‘。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。
  • stretch:各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于‘flex-start‘。在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。

演示:align-content

  • order (适用于弹性盒模型容器子元素)

order: <integer>
  • <integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。

演示:order

  • flex-grow (适用于弹性盒模型容器子元素)

设置或检索弹性盒的扩展比率。

根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

flex-grow: <number> (default 0)
  • <number>:用数值来定义扩展比率。不允许负值
  • flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow,可以看到总共将剩余空间分成了4份,其中b占1份,c占3分,即1:3

演示:flex-grow

  • flex-shrink (适用于弹性盒模型容器子元素)

设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。)

flex-shrink: <number> (default 1)

演示:flex-shrink

  • 说明:
  • flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
  • 本例中c显式的定义了flex-shrink,a,b没有显式定义,但将根据默认值1来计算,可以看到总共将剩余空间分成了5份,其中a占1份,b占1份,c占3分,即1:1:3
  • 我们可以看到父容器定义为400px,子项被定义为200px,相加之后即为600px,超出父容器200px。那么这么超出的200px需要被a,b,c消化
  • 按照以上定义a,b,c将按照1:1:3来分配200px,计算后即可得40px,40px,120px,换句话说,a,b,c各需要消化40px,40px,120px,那么就需要用原定义的宽度相减这个值,最后得出a为160px,b为160px,c为80px
  • flex-basis (适用于弹性盒模型容器子元素)

设置或检索弹性盒伸缩基准值。

flex-basis: <length> | auto (default auto)
  • auto:无特定宽度值,取决于其它属性值
  • <length>:用长度值来定义宽度。不允许负值
  • <percentage>:用百分比来定义宽度。不允许负值

演示:flex-basis

  • flex (适用于弹性盒模型子元素)

复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

如果缩写flex:1, 则其计算值为:1 1 0

flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
  • none:none关键字的计算值为: 0 0 auto
  • [ flex-grow ]:定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]:定义弹性盒子元素的收缩比率。
  • [ flex-basis ]:定义弹性盒子元素的默认基准值。

演示:flex

  • 说明:
  • 上例中,定义了父容器宽(即主轴宽)为800px,由于子元素设置了伸缩基准值flex-basis,相加300+500+600=1400,那么子元素将会溢出1400-800=600px;
  • 由于同时设置了收缩因子,所以加权综合可得300*1+500*2+600*3=3100px;
  • 于是我们可以计算a,b,c将被移除的溢出量是多少:
  • a被移除溢出量:300*1/3100*600=3/31,即约等于58px
  • b被移除溢出量:500*2/3100*600=10/31,即约等于194px
  • c被移除溢出量:600*3/3100*600=18/31,即约等于348px
  • 最后a,b,c的实际宽度分别为:300-58=242px, 500-194=306px, 600-348=252px
  • align-self (适用于弹性盒模型子元素)

设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch
  • auto:如果‘align-self‘的值为‘auto‘,则其计算值为元素的父元素的‘align-items‘值,如果其没有父元素,则计算值为‘stretch‘。
  • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
  • center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
  • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与‘flex-start‘等效。其它情况下,该值将参与基线对齐。
  • stretch:如果指定侧轴大小的属性值为‘auto‘,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照‘min/max-width/height‘属性的限制。

演示:align-self

  • 常用例子

  • 1.居中对齐

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction and if we allow the items to wrap
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}
  • 通过设置父类容器的css代码控制子元素的排列方式(flex-direction:row)从左到右(默认方式)。
  • 子元素超出内容时是否换行。flex-wrap:wrap(采用换行的方式)。
  • 合起来就是flex-flow:row wrap
  • 设置子元素的弹性盒堆叠伸缩行的对齐方式为在盒子中平局分布 justify-content:space-around

演示:flexbox3

  • 2.自适应导航

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
  • 设置子元素为从左到右(flex-direction:row),内容超出换行(flex-wrap:wrap).
  • 设置子元素的内容向右对齐(justify-content:flex-end)
  • 当小于800px时,内容为居中,当小于500px时,内容纵向排列,从上到下。

演示:flexbox4

  • 3.常见3栏移动优先布局

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars
   */
  .main { flex: 2 0px; }

  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
  • 设置子元素从左到右,超出换行(flex-flow:row wrap;)。
  • 默认情况下所有子元素拓展比例为1(flex-grow:1),伸缩比例为100%(flex-basis:100%)。
  • 大于800px时,.main的拓展比例为2.伸缩值为0(flex-basis:0px),并且侧栏aside-1排列在第一位,main在第二位,aside-2在第三位。
  • 大于600时。.aside元素的拓展比例为1(flex-grow:1),伸缩比例为auto(flex-basis:auto)。

演示:flexbox5

Chrome Safari Firefox Opera IE Android ios
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ 支持新的语法

查看更多关于浏览器兼容的信息请访问:简单版CSS tricks的另一篇文章或者DevOpera

  • 这里提供一个Sass的函数帮助你理解

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

本文为蔡宝坚用心创作的文章,版权所有,未经本人许可,禁止复制,转载,摘录部分或者全部,违者将追究法律责任。

原文链接:CSS3弹性盒模型flexbox完整版教程 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/flexbox-guide.html)

7

时间: 09-14

CSS3弹性盒模型flexbox完整版教程的相关文章

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS3弹性盒模型之box-orient &amp; box-direction

Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origent: 水平或垂直分布. box-origent有两个值:horizional(水平)和vertical(垂直),意思就是元素的排列方式! css代码如下: body {display: -webkit-box; -webkit-box-orient: horizional; } 水平排列方式如下:

CSS3弹性盒模型

旧式的弹性盒子 1.在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型 2.box-flex 分配空间,假如容器有a份,box-flex:2,那就占a分之2 3.分布方向  水平box-orient: horizontal;  垂直 box-orient:vertical; 4.定义显示顺序:box-ordinal-group 实例 <!DOCTYPE html> <html lang="zh"> <head> &

CSS3弹性盒模型之Flexbox是布局模块box-sizing &amp; box-orient &amp; box-direction &amp; box-ordinal-group

css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入width之内 padding-box,border-box,border和padding计算入width之内 ie8+浏览器支持content-box和border-box: ff则支持全部三个值. 使用时: -webkit-box-sizing: 100px; //

CSS3弹性盒模型之box-flex

对于之前讲过的box-sizing属性,对于页面布局很有用,但是突然发现它依然存在一些问题,前面例子中不会存在问题,不代表它没有问题.如果元素的个数整除100%的时候呢,比较3个元素,那么第一个盒子的宽度就会是33.3333333%,很显然,无论如何都是除不尽的,也就是说不可能平均分配.这显然是不完美的!是否有更完美的解决方案呢,答案是——有,它就是 box-flex. box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.它使

弹性盒模型flex

弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项.而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率更高一点,所以就将之前学习弹性盒模型的相关知识点整理出来,给大家分享. 弹性盒模型flex布局介绍 弹性盒模型(flexbox)又称为弹性布局,是css3中新提出的一种布局方式,通过弹性布局,可以让子元素自动调整宽度和高度,从而达到很好的填充任何

深入理解 CSS3 弹性盒布局模型

Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最重要的一环就是布局.需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.这也使得布局的逻辑变得更加复杂.本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求.它的优势在于开发人员只是声明布局应该

详细介绍弹性盒模型(display:flex)

弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:display:flex:(注意,webkit内核的需要加webkit前缀,行内元素设置弹性盒子的话,设置display:inline-flex:而且,设置了弹性盒子,子元素的float,clear,vertical属性都将失效). 弹性盒子默认有两条轴,横轴和纵轴,默认横轴为主轴(默认自左向右)纵轴为辅

html5浮动、等高、弹性盒模型

1px dashed虚线 box-sizing拯救了布局 1.inherit  继承父级 2.content-box(默认)-----这个盒子的边框.内边距 这2个值是不包括在width和height中,所以外扩 3.border-box---- 这个盒子的边框.内边距 这2个值是包括在width和height中了 浮动就是让元素脱离了文档.文档为空后,所以边框就包不住了.所以我们要清除浮动 方法一:(有问题,不建议) 之前html是用clear来清除的,现在不能用这个了 <!-- 在父级里添加