Flex 布局

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box {display: flex;}

行内元素也可以使用 Flex 布局。

.box {display: inline-flex;}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex
container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex
item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross
axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main
end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main
size，占据的交叉轴空间叫做cross size。

容器的属性

以下6个属性设置在容器上。

flex-direction:属性决定主轴的方向（即项目的排列方向）。
flex-wrap:如果一条轴线排不下，如何换行
flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content:justify-content属性定义了项目在主轴上的对齐方式。
align-items:属性定义项目在交叉轴上如何对齐。
align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-direction属性（主轴的方向）

flex-direction属性决定主轴的方向（即项目的排列方向）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EFIp3aJQ-1574500306205)(media\2019-10-17_231633.jpg)]

.box {flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性（如何换行）

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow（flex-direction属性和flex-wrap属性的简写）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content属性（主轴上的对齐方式）

justify-content属性定义了项目在主轴上的对齐方式。

.box {justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性（副轴上如何对齐）

align-items属性定义项目在副轴上如何对齐。

.box {align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性（多根轴线的对齐方式）

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

弹性子元素属性

值	描述
flex-grow	一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

order属性（项目的排列顺序）

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {order: <integer>;
}

flex-grow属性（放大比例）

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性（缩小比例）

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，越缩小

.item {flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性（项目占据的主轴空间）

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

.item {flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性（flex-grow, flex-shrink 和 flex-basis的简写）

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1
auto。后两个属性可选。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

值	描述
flex-grow	一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。也可以扩大，也可以缩小
none	与 0 0 auto 相同。不扩大也不缩小
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

align-self属性（不一样的对齐方式）

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

媒体查询

使用 @media 查询，你可以针对不同的设备类型以及设备的不同特性，定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

浏览器支持

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

Rule	chrome	IE	firefox	Safari	opera
@media	21	9	3.5	4.0	9

媒体查询语法

样式表中的CSS媒体查询

@media not|only mediatype and (expressions) and（expressions）...{CSS-Code;
}

mediatype：设备类型；

expressions：设备特性；

上面语法中的[ and (设备特性)]可以出现0~N次，通过使用多个[ and (设备特性)]
可以对多个设备特性进行匹配。

示例如下

@media (max-width: 768px) {.box {background-color: red;}
}
@media (min-width: 768px) {.box {background-color: green;}
}
@media (min-width: 992px) {.box {background-color: blue;}
}
@media (min-width: 1200px) {.box {background-color: black;}
}

1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){.box {display:none;}
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){.box{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3.多个媒体特性使用

Media Queries可以使用关键词**"and**"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;}
}

4.设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例如下：

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

<link rel="stylesheet" media="(max-width: 768px)" href="example1.css" />
<link rel="stylesheet" media="(min-width: 768px)" href="example2.css" />
<link rel="stylesheet" media="(min-width: 992px)" href="example3.css" />
<link rel="stylesheet" media="(min-width: 1200px)" href="example4.css" />

5.导入样式表中的CSS媒体查询

@import url(skyblue.css) mediatype and|not|only (expressions);

示例如下：：

@import url(exmple1.css) screen and (max-width: 768px);
@import url(exmple2.css) screen and (min-width: 768px);
@import url(exmple3.css) screen and (min-width: 992px);
@import url(exmple4.css) screen and (min-width: 1200px);

媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

设备特性

特性	合理的双方的特性值	说明
width	带单位的长度值，例如600px	匹配浏览器窗口的宽度
height	带单位的长度值，例如600px	匹配浏览器窗口的高度
aspect-ratio	比例值，例如16/9	匹配浏览器窗口的宽度值与高度值的比率
device-width	带单位的长度值，例如600px	匹配设备分辨率的宽度值
device-height	带单位的长度值，例如600px	匹配设备分辨率的高度值
device-aspect-ratio	比例值，例如16/9	匹配设备分辨率的宽度值与高度值的比率
color	整数值	匹配设备使用多少位的色深。比如真彩色时32。如果不是彩色设备，该值为0
color-index	整数值	匹配色彩表中颜色数
monochrome	整数值	匹配单色帧缓冲器中每像素的位(bit)数。如果不是单色设备，该特性值为0
resolution	分辨率值。比如300dpi	匹配设备的分辨率
scan	只能是progressive或interlace	匹配设备的扫描方式。Progressive表示逐行扫描；interlace表示隔行扫描
grid	只能是0或1	匹配设备是否基于栅格的。1表示是，0表示其他方式。

当媒体查询为true时, 其对应的样式表或样式规则就会遵循正常的级联规则进行应用.
即使媒体查询返回false, <link> 标签指向的样式表也将会被下载(但是它们不会被应用)

除非使用not或only操作符, 否则媒体类型是可选的, 默认值是all(全部).

逻辑操作符

可以使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询。and 操作符用来把多个。
媒体属性组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
not操作符用来对一条媒体查询的结果进行取反。only操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。若使用了not 或 only 操作符，必须明确指定一个媒体类型。
你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or 操作符。

and

关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的
all媒体类型，可能像这样子：

@media (min-width: 700px) { ... }

如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：

(min-width: 700px) and (orientation: landscape) { ... }

现在上面的媒体查询仅在可视区域宽度不小于700像素并在在横屏时有效。如果，你仅想再电视媒体上应用，你可以使用
and 操作符合并媒体属性：

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

现在，上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。

逗号

媒体查询中使用逗号分隔效果等同于 or
逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

如上文，如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于

@media all and (min-width: 700px)

将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。

not

not 关键字应用于整个媒体查询，在媒体查询为假时返回真 (比如 monochrome应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上)。在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。
not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。例如，not在下面的查询中最后被计算：

@media not all and (monochrome) { ... }

等价于：

@media not (all and (monochrome)) { ... }

而不是：

@media (not all) and (monochrome) { ... }

另一个例子，看下面的媒体查询：

@media not screen and (color), print and (color)