flex布局

flex布局简介

flex布局的结构主要包括容器containers（父元素）以及项目items（子元素）

以下示例创建一个基本的CSS flexbox：

// 示例
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-item {
  width: 100px;
  margin: 10px;
}

下一个示例创建一个响应式图片库：

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.flex-item {
  background-color: lightgray;
  background-position: center center;
  background-size: cover;
  margin: 2px;
  flex: auto;
  height: 240px;
  flex-basis: 150px;
}

记住 ：CSS 中的 flexbox 是 一维 的，因此，它不会同时在 垂直 和 水平 维度上布置项目。

将属性分配给 父元素 比将它们单独分配给每个子元素效率更高。这些属性允许在容器内组织项目(一些应用于父元素;其他的适用于子元素)

CSS flexbox可以控制布局的以下方面：

• 项目显示的方向
• 调整窗口大小时对项目的包装
• 项目和之间的空间的合理性
• 项目的垂直对齐
• 项目的水平对齐
• 一行中的项目顺序
• 当窗口调整大小时，项目增加或缩小的能力
• 单个项的对齐

Flex containers

CSS flex 容器是具有显示属性设置为 flex 或 inline-flex 的元素。 然后，容器的所有子项都将变为弹性项。

因此， CSS flex 容器定义了其子元素的大小、对齐方式和位置。

提示：inline-flex容器和block flex容器的子元素行为相同。 flex容器要么扩展项目以填充可用空间，要么使它们变小以避免溢出。

每一个 flex box 都含有下列默认属性值：

• flex-direction: row
• justify-content: flex-start
• align-items: stretch
• align-content: stretch
• flex-basis: auto
• flex-wrap: nowrap

容器内项目连续分布，内容的大小决定主轴上的大小。 当项目超出容器的容纳范围时，它们就会溢出。 另外，如果某些项目的高度比其他项目大，则较小的项目会拉伸以适合最高的项目。

Note: 其他属性没有默认值，如果不设定，CSS不会自主设定

Flexbox axis

以下CSS flex示例显示了flex-direction如何更改flex容器及其项目：

CSS flexbox有两个轴向: main和cross.

可以通过使用 flex-direction 属性去定义主轴方向，4个值分别是：row, row-reverse, column, column-reverse.

属性值	描述
row	从左到右水平排列子元素（默认值）
column	从上到下垂直排列子元素
row-reverse	从右向左排列子元素
column-reverse	从下到上垂直排列子元素

Flex-direction

flex-direction: column 项目的方向是从上到下。

.flex-container { display: flex; flex-direction: column; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: column-reverse 项目的方向从下到上。

.flex-container { display: flex; flex-direction: column-reverse; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: row 项目方向从左到右。

.flex-container { display: flex; flex-direction: row; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: row-reverse项目方向从右向左

.flex-container { display: flex; flex-direction: row-reverse; } 
.flex-item { width: 100px; margin: 10px; }

Flex-wrap

CSS flex-wrap属性定义了容器包含多项目时的行为

可能的 flex-wrap 值是:

• nowrap
• wrap
• wrap-reverse

选项	说明
nowrap	元素不拆行或不拆列（默认值）
wrap	容器元素在必要的时候拆行或拆列。
wrap-reverse	容器元素在必要的时候拆行或拆列，但是以相反的顺序

Note: flex-wrap属性确定是否应包装溢出。 如果未设置此属性，则元素默认情况下会溢出容器。

下面的CSS flex示例演示了每个flex-wrap值的作用。

flex-wrap: wrap:

.flex-container { display: flex; flex-wrap: wrap; } 
.flex-item { width: 100px; margin: 10px; }

flex-wrap: nowrap:

.flex-container { display: flex; flex-wrap: nowrap; } 
.flex-item { width: 100px; margin: 10px; }

flex-wrap: wrap-reverse

.flex-container { display: flex; flex-wrap: wrap-reverse; } 
.flex-item { width: 100px; margin: 10px; }

Flex-flow

flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。
使用此简写，您可以为 flex 容器定义主轴和交叉轴。

Justify-content

用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。

选项	说明
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始
space-between	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	元素间距离平均分配

Align-items

用于控制容器元素在交叉轴上的排列方式。

选项	说明
stretch	元素被拉伸以适应容器（默认值）
center	元素位于容器的中心
flex-start	元素位于容器的交叉轴开头
flex-end	元素位于容器的交叉轴结尾

Justify-content 和 align-items

CSS因未能提供简单的居中元素方法而臭名昭著。 但是， CSS flexbox 可以将一个或多个项目放在容器的中心。 您可以通过将 justify-content 和 align-items 都设置为居中来使元素居中。

.flex-container { display: flex; align-items: center; justify-content: center; } 
.flex-item { width: 100px; margin: 10px;}

Align-content

只适用于多行显示的弹性容器，它的作用是当flex容器在交叉轴上有多余的空间时，对元素的对齐处理。

选项	说明
stretch	将空间平均分配给元素
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始
space-between	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	元素间距离平均分配

Note: 如果容器中只有一行项，则此属性将不起作用。

Flex items

CSS flex项是flex容器的直接子元素。一旦您将一个元素设置为容器，它的子元素就会自动成为flex项目。

• 不能使用float与clear规则
• 弹性元素均为块元素
• 绝对定位的弹性元素不参与弹性布局

有五个针对单个弹性项目的属性（一个简写）。 它们为您提供了对单独元素的更多控制，而不会覆盖整个flex容器布局的规则。
默认情况下，有三个属性具有初始值:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

使用这些值，flex项不会展开以填充主轴上的可用空间。但是，当容器比需要的更小时，伸缩项会收缩。

设置flex- base值auto意味着项目足够大，以适合其内容。如果flex项目填满了flex容器，但是其中一个项目的内容明显多于其他项目，那么它将获得更多的空间来容纳所有内容。这个默认设置确保了最好的布局。

Align-self

用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。

选项	说明
stretch	将空间平均分配给元素
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始

order

默认情况下，容器中的弹性项目以它们在代码中出现的顺序（源顺序）出现。 您可以使用order属性更改此序列。

您必须指定一个负数或正数作为其值。 根据这些数字，这些物品将被重新加载。 最低的数字排在最前面（负值先于0和正数）

以下示例显示了实际使用的CSS flex项目order属性。

<div class="flex-container">
	<div style="order: 2">1</div>
	<div style="order: 3">2</div>
	<div style="order: 1">3</div>
	<div style="order: 5">4</div>
	<div style="order: 4">5</div>
</div>

Flex-grow

flex-grow属性定义弹性项目相对于其他项目的扩展程度（如果有可用空间的话）。 您可以使用无单位的正数设置其值。 数字代表比例。

例如，如果您将flex-grow：2分配给一个弹性项目，则其扩展大小将是同一弹性容器中其余项目的两倍

Note: 负数不起作用

Flex-shrink

CSS flex-shrink属性类似于flex-grow。但是，flex-shrink定义了伸缩项目比容器中其他项目收缩更多的比例(当没有足够的空间保持原始大小时)

因此，flex-shrink减少项目的大小，使他们适合容器

Flex-basis

flex-basis属性定义弹性项目的初始大小。 它接受长度单位或百分比。

您还可以使用自动值（默认值）。 它将项目的源长度视为其flex-basis值。 如果未在代码中设置长度，则项目的内容确定其长度。

Flex

Flex属性是在一个声明中定义与项大小相关的所有项属性的简写。简写描述了flex-grow、flex-shrink和flex- base(值必须按照这个顺序)属性。

flex: 0 1 auto;

• 0表示当有多余空间时，该项目将不会展开以填充容器
• 1指定当空间变小时，它将以与其他项目相同的比例缩小
• 最后，auto表示项目的初始长度与源代码中的相同

后记

CSS grid layou类似于flexbox。

记住， grid layout对于大规模布局是更好的选择，而flexbox对于小规模布局更好。

由于flexbox在旧浏览器中有更好的支持，所以可以将它用作 grid layout的备用方案。