Flexbox

本文演示 demo 地址 flexbox-demo

简介

• Flexbox（Flexible Box）弹性盒，弹性盒为 CSS 增加了一种新的布局方式 — 弹性布局。
• 由于桌面浏览器对 Flexbox 的支持还未得到普及，因此它还未成为桌面端页面的主流布局方式。而在移动端，当浏览器的兼容已不是最大的问题时，我们就可以使用 Flexbox 布局了。
• Flexbox 对于移动端有着特别的意义。在传统的定位方式中有很多float属性，这些浮动对于移动端来说就是对渲染性能的消耗。而在 Flexbox 中，浮动成为了历史，这变相提升了移动端的性能。此外开发者也不必再去计算那些让人烦恼的 margin、padding、width 和 height，可以把这一切都交给 Flexbox, 由它来选择最佳的空间利用方式。

基础知识

• 弹性容器
  任何 HTML 元素都可以作为弹性容器。
• 弹性项目
  直接嵌套在弹性容器里的标签叫弹性项目。弹性容器的每个直接子代都会自动变成弹性项目。

弹性容器相关的属性

display

/* 把元素设成弹性容器 */
display: flex

flex-flow

1. 默认情况下，弹性项目并排显示成一行。而且浏览器只在一行里显示各个弹性项目，不会换行。
2. flex-flow 属性是另外两个弹性盒相关的 CSS 属性的简写形式：flex-direction 和 flex-wrap。
3. 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 属性完全没有效果。
• 这个属性有五个可选值：
  1. flex-start：项目在一行里靠左对齐。如果把方向设为 row-reverse，则会靠右对齐各个项目。
  2. flex-end：项目在一行里靠右对齐。如果把方向设为 row-reverse，则会靠左对齐各个项目。
  3. center：弹性项目居中显示在容器中间。
  4. space-between：均布各个项目，项目之间的空间大小相同，两边项目贴近容器边缘。
  5. space-around：把容器里剩余的控件平均分给各个项目，包括最左边和最右边的项目。

align-items

• align-items 属性决定高度不同的弹性项目在弹性容器里的纵向对齐方式。默认情况下，弹性项目会拉伸，因此高度都相同。
• 如果容器的方向是 column，align-items 属性用于控制宽度不同纵排弹性项目在弹性容器里的横向对齐方式。
• 这个属性有五个可选值：
  1. flex-start：把各个弹性项目的顶边与容器的顶边对齐。
  2. flex-end：把各个弹性项目的底边与容器的底边对齐。
  3. center：把各个弹性项目的纵向中心线与容器的纵向中心线对齐。
  4. baseline：把各个弹性项目里第一个元素的基线对齐。
  5. stretch：拉伸容器里的各个项目，使各个项目的高度相同（常规行为）。

align-content

• 这个属性告诉浏览器如何放置显示为多行的弹性项目
• 只有满足两个条件，align-content 属性才会起作用：
  1. 弹性容器必须允许换行。
  2. 弹性容器的高度必须大于多行显示的弹性项目。
• 这个属性有六个可选值：
  1. flex-start：把各行弹性容器放在弹性容器的顶部。
  2. flex-end：把各行弹性容器放在弹性容器的底部。
  3. center：把各行整体的纵向中心线与容器的纵向中心线对齐。
  4. space-between：把纵向额外的空间平均分布在各行之间，上下两行贴近容器边缘。
  5. space-around：把纵向额外的空间平均分布在各行之间，包括上下两行。
  6. stretch：拉伸容器里的各个项目，让一行里的项目高度相同。如果项目里的内容不一样多，可行的高度不相同（常规行为）。

弹性项目相关的属性

order

• order 属性用于为弹性项目设置数值，指明项目在行（或列）里的位置
• order 属性的数值与 z-index 属性的数值作用类似，因此不必要使用连续的数字。
• 有时可能只想把一列移动到最左边或最右边。此时只需为想移动的项目设置 order 属性，其他项目都别设置。设为 -1，项目会被移到弹性容器的左边；设为1，项目会移到最右边。

align-self

• 只应用于单个弹性项目，会覆盖 align-items 属性的值。

flex

• flex 属性可以弹性设置弹性项目的宽度
• 默认值：flex: 0 1 auto;
• flex 属性有3个参数：
  1. flex-grow（当项目的宽度之和小于容器的宽度时有用）
  2. flex-shrink（当项目的宽度之和大于容器的宽度时有用）
  3. flex-basis（允许弹性容器换行时，flex-basis 属性值才真正有用）

Tips

• 对弹性项目来说，把外边距设为auto的意思是，让浏览器根据可用空间自行设置外边距的大小