本文演示 demo 地址 flexbox-demo
简介
- Flexbox(Flexible Box)弹性盒,弹性盒为 CSS 增加了一种新的布局方式 — 弹性布局。
- 由于桌面浏览器对 Flexbox 的支持还未得到普及,因此它还未成为桌面端页面的主流布局方式。而在移动端,当浏览器的兼容已不是最大的问题时,我们就可以使用 Flexbox 布局了。
- Flexbox 对于移动端有着特别的意义。在传统的定位方式中有很多float属性,这些浮动对于移动端来说就是对渲染性能的消耗。而在 Flexbox 中,浮动成为了历史,这变相提升了移动端的性能。此外开发者也不必再去计算那些让人烦恼的 margin、padding、width 和 height,可以把这一切都交给 Flexbox, 由它来选择最佳的空间利用方式。
基础知识
- 弹性容器
任何 HTML 元素都可以作为弹性容器。 - 弹性项目
直接嵌套在弹性容器里的标签叫弹性项目。弹性容器的每个直接子代都会自动变成弹性项目。
弹性容器相关的属性
display
/* 把元素设成弹性容器 */
display: flex
flex-flow
- 默认情况下,弹性项目并排显示成一行。而且浏览器只在一行里显示各个弹性项目,不会换行。
- flex-flow 属性是另外两个弹性盒相关的 CSS 属性的简写形式:flex-direction 和 flex-wrap。
- flex-flow 属性既能控制弹性项目的排列方向,也能控制是否换行。这个属性之间用两个值,之间用空格分隔。第一个指明方向,第二个值指明是否换行。
- 第一个参数:控制方向
- row:各个弹性项目并排显示(默认设置)
- row-reverse
- column:各个弹性项目纵向叠放
- column-reverse
- 第二个参数:控制是否换行
- nowrap:常规行为
- wrap
- wrap-reverse
.container {
display: flex;
flex-flow: column-reverse nowrap;
}
justify-content
- justify-content 属性告诉浏览器把弹性项目显示在一行里的什么位置。只有为弹性项目设置了宽度,而且各个项目的宽度之和小于弹性容器的宽度时,这个属性才起作用。
- 如果宽度是弹性的,justify-content 属性完全没有效果。
- 这个属性有五个可选值:
- flex-start:项目在一行里靠左对齐。如果把方向设为 row-reverse,则会靠右对齐各个项目。
- flex-end:项目在一行里靠右对齐。如果把方向设为 row-reverse,则会靠左对齐各个项目。
- center:弹性项目居中显示在容器中间。
- space-between:均布各个项目,项目之间的空间大小相同,两边项目贴近容器边缘。
- space-around:把容器里剩余的控件平均分给各个项目,包括最左边和最右边的项目。
align-items
- align-items 属性决定高度不同的弹性项目在弹性容器里的纵向对齐方式。默认情况下,弹性项目会拉伸,因此高度都相同。
- 如果容器的方向是 column,align-items 属性用于控制宽度不同纵排弹性项目在弹性容器里的横向对齐方式。
- 这个属性有五个可选值:
- flex-start:把各个弹性项目的顶边与容器的顶边对齐。
- flex-end:把各个弹性项目的底边与容器的底边对齐。
- center:把各个弹性项目的纵向中心线与容器的纵向中心线对齐。
- baseline:把各个弹性项目里第一个元素的基线对齐。
- stretch:拉伸容器里的各个项目,使各个项目的高度相同(常规行为)。
align-content
- 这个属性告诉浏览器如何放置显示为多行的弹性项目
- 只有满足两个条件,align-content 属性才会起作用:
- 弹性容器必须允许换行。
- 弹性容器的高度必须大于多行显示的弹性项目。
- 这个属性有六个可选值:
- flex-start:把各行弹性容器放在弹性容器的顶部。
- flex-end:把各行弹性容器放在弹性容器的底部。
- center:把各行整体的纵向中心线与容器的纵向中心线对齐。
- space-between:把纵向额外的空间平均分布在各行之间,上下两行贴近容器边缘。
- space-around:把纵向额外的空间平均分布在各行之间,包括上下两行。
- stretch:拉伸容器里的各个项目,让一行里的项目高度相同。如果项目里的内容不一样多,可行的高度不相同(常规行为)。
弹性项目相关的属性
order
- order 属性用于为弹性项目设置数值,指明项目在行(或列)里的位置
- order 属性的数值与 z-index 属性的数值作用类似,因此不必要使用连续的数字。
- 有时可能只想把一列移动到最左边或最右边。此时只需为想移动的项目设置 order 属性,其他项目都别设置。设为 -1,项目会被移到弹性容器的左边;设为1,项目会移到最右边。
align-self
- 只应用于单个弹性项目,会覆盖 align-items 属性的值。
flex
- flex 属性可以弹性设置弹性项目的宽度
- 默认值:flex: 0 1 auto;
- flex 属性有3个参数:
- flex-grow(当项目的宽度之和小于容器的宽度时有用)
- flex-shrink(当项目的宽度之和大于容器的宽度时有用)
- flex-basis(允许弹性容器换行时,flex-basis 属性值才真正有用)
Tips
- 对弹性项目来说,把外边距设为auto的意思是,让浏览器根据可用空间自行设置外边距的大小