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.float, clear 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

时间： 2024-10-12 17:37:17

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

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

原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开发 | 精选推荐•CSS3 | flexbox | 弹性布局•16928View19 文章目录 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了新版的弹性盒子的相关属性,并且给出了几个使用例子.是新手入门flexbox的一个优秀教

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

原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案.另外本人2014年5月还废寝忘食的翻译了国外的<CSS3弹性盒模型flexbox完整教程>和<CSS3弹性盒模型flexbox布局实例>,这么好的文章没有人来发现,实在是遗憾. 文章写作背景 查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始

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

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

css3基础教程：CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. 注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局. 盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀. 父元素display:box或者display:inline-box; display: -webkit-box;display: -m

详解css3弹性盒模型（Flexbox）（转）

今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 创建Flex容器 flexbox布局首先需要创建一个flex容器.为此给元素设置display属性的值

css3弹性盒模型（Flexbox）

Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 创建Flex容器 flexbox布局首先需要创建一个flex容器.为此给元素设置display属性的值为flex.对于IE10来说,我们需要在开头的地方添加-ms-flexbox. .cont

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弹性盒模型与布局

一.弹性盒模型 1.注意:在使用弹性盒模型的时候,父元素必须要加display:box 或 display:inline-box,同时要加浏览器内核前缀 Box-orient 定义盒模型的布局方向 Horizontal 水平显示 vertical 垂直方向 box-direction 元素排列顺序 Normal 正序 Reverse 反序 box-ordinal-group 设置元素的具体位置 Box-flex 定义盒子的弹性空间 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所