【再学CSS】一文带你了解flex布局

【再学CSS】一文带你了解flex布局

一、认识flexbox

1.1 基本概念

• Flexbox翻译为弹性盒子:
  • 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
  • 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
  • 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
• flex布局是目前web开发中使用最多的布局方案
• 为什么需要flex布局呢?
  • 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
  • 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举

Flexbox 是 flexible box 的简称，是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

1.2 flex布局的重要概念

• 开启了 flex 布局的元素叫 flex container
• flex container 里面的直接子元素叫做 flex item
• 当flex container中的子元素变成了flex item时, 具备一下特点:
  • flex item的布局将受flex container属性的设置来进行控制和布局;
  • flex item不再严格区分块级元素和行内级元素;
  • flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;
• 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
  • flex： flex container 以 block-level 形式存在
  • inline-flex： flex container 以 inline-level 形式存在

1.3 flex布局的模型

二、flex相关的属性

2.1 容器属性

2.1.1 flex-direction

flex-direction属性指定了弹性子元素在父容器中的位置（决定了主轴的方向）。

语法：flex-direction: row | row-reverse | columu | column-reverse

flex-direction的值有：

• row（默认值）：横向从左到右排列（左对齐）

• 

• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）

• 

• column：纵向排列，起点在上沿

• 

• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

• 

2.1.2 flex-wrap

flex-wrap属性用于指定弹性盒子的子元素换行方式

语法：flex-wrap:nowrap|wrap|wrap-reverse

flex-wrap的值有：

• nowrap（默认值）：弹性容器为单行。该情况下弹性子项可能会一溢出容器

• 

• wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行（第一行在上方）

• 

• wrap-reverse：反转wrap排列（第一行在下方）

• 

2.1.3 justify-content

内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐（决定了 flex items 在 main axis 上的对齐方式）

语法：justify-content: flex-start | flex-end | center | space-between | space-around

justify-content的值有：

• flex-start（默认值）：向行头紧挨着填充（左对齐）

• 

• flex-end：向行尾紧挨着填充（右对齐）

• 

• center：居中紧挨着填充

• 

• space-between：两端对齐，平均分布在该行上

  • flex items 之间的距离相等
  • 与 main start、main end两端对齐

• 

• space-around：每个弹性盒子两侧的间隔相等

  • flex items 之间的距离相等
  • flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

• 

2.1.4 align-items

align-items 设置或检索弹性盒子在纵轴方向上的对齐方式

语法：align-items: flex-start | flex-end | center | baseline | stretch

align-items的值有：

• flex-start：弹性盒子元素的纵轴起始位置紧靠着该行的纵轴起始位置（起点对齐）

• 

• flex-end：弹性盒子元素的纵轴起始位置紧靠着该行的纵轴结束位置（终点对齐）

• 

• center：弹性盒子元素在该行的纵轴上居中对齐。

• 

• baseline：弹性盒子元素的第一行文字的基线对齐

• 

• stretch（默认值）：如果弹性盒子元素未设置高度或设为auto，将占满整个容器的高度

• 

2.1.5 align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

2.2 项目属性

2.2.1 order

order 决定了 flex items 的排布顺序

• 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
• 默认值是 0

2.2.2 flex items

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

• auto（默认值）：遵从 flex container 的 align-items 设置
• stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

2.2.3 flex-grow

flex-grow 决定了 flex items 如何扩展(拉伸/成长)

• 可以设置任意非负数字（正小数、正整数、0），默认值是 0
• 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为

• flex container 的剩余 size * flex-grow / sum

flex item默认情况下是包裹内容的，flex-grow的默认值为0，如果存在剩余空间，也不会放大

将两个flex item的flex-grow分别设置为3，7，将按3；7的比例平分空间

flex items 扩展后的最终 size 不能超过 max-width\max-height

2.2.4 flex-shrink

flex-shrink 决定了 flex items 如何收缩(缩小)

• 可以设置任意非负数字（正小数、正整数、0），默认值是 1，即如果空间不足，该项目将缩小
• 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为

• flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

flex items 收缩后的最终 size 不能小于 min-width\min-height

2.2.5 flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• auto（默认值）、具体的宽度数值

决定 flex items 最终 size 的因素，从优先级高到低

• max-width\max-height\min-width\min-height
• flex-basis
• width\height
• 内容本身的 size

2.2.6 flex属性

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

• 单值语法: 值必须为以下其中之一:
  • 一个无单位数(number): 它会被当作flex-grow的值。
  • 一个有效的宽度(width)值: 它会被当作flex-basis的值。
  • 关键字none，auto或initial.
• 双值语法: 第一个值必须为一个无单位数，并且它会被当作flex-grow的值。
  • 第二个值必须为以下之一：
    • 一个无单位数：它会被当作flex-shrink的值。
    • 一个有效的宽度值: 它会被当作flex-basis的值。
• 三值语法:
  • 第一个值必须为一个无单位数，并且它会被当作flex-grow的值**。
  • 第二个值必须为一个无单位数，并且它会被当作flex-shrink的值。
  • 第三个值必须为一个有效的宽度值， 并且它会被当作flex-basis的值。