HTML5+CSS3---弹性盒子模型

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容器（flex container），并通常简称为"容器"。

该容器默认设置有两个坐标系：一个是水平方向上的主坐标系（main axis），另一个是垂直方向上的交叉坐标系（cross axis）。在主要坐标系中：

• 主坐标系从与容器边框相交处开始延伸至main end的位置；
• 从与容器边框相交处延伸至main end的位置。
  在交叉坐标系中：
• 起始端位于cross start的位置；
• 延伸至cross end的位置。

默认情况下，在系统中各个项目都是按照预设的方式沿着主轴进行排列。每个项目在其主轴上占用的空间被称为main size，在其交叉轴上占用的空间被称为cross size。

容器的属性

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

• 该属性指定主轴的方向（即项目的排列方向）。
  • 当一个轴无法容纳所有元素时，请进行换行处理。
  • 它是flex-direction和flex-wrap这两个属性的缩写形式，默认设置为row nowrap。
  • 它决定了项目在主轴上的分布位置。
  • 它决定了项目在交叉轴上的排列位置。
  • 它决定了多根axis之间的分布情况；当仅有一个axis存在时，则此设置无效。

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

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

外链图片无法正常上传,建议检查网站防盗链配置并尝试另存为本地文件,完整路径为 media\2019-10-17_23:16:33.jpg

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

它可能有4个值。

• row，默认设置：axis 为 horizontal axis，默认情况下位于左侧。
• row-reverse：反转后的行，默认情况下位于右侧；该 axis仍处于 horizontal orientation的位置设定
• column getDefault setting: axis 作为 vertical axis，默认情况处于上沿位置
• column-reverse: 反转后的列，默认情况处于下沿位置

flex-wrap属性（如何换行）

通常情况下，默认状态下所有的项目都将被排列成一行（也被称作axially aligned）。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起始（默认值）：实现元素向左排列
• flex结束（default）: 使元素靠右分布
• 居中排列: 将内容均匀分布在页面中央
• 间距两端: 确保各元素间保持一致的距离分布
• 间距周围: 各项目的左右间距相同,由此导致各项目间的距离是其与边框距离的两倍

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属性（多根轴线的对齐方式）

该属性指定了多根轴线的对齐方式。当项目仅包含一根轴线时，该属性将被无效化。

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

该属性可能取6个值。

• flex-start：与交叉轴起始端对齐。
• flex-end：与交叉轴结束端对齐。
• center：沿交叉轴居中排列。
• space-between：将各根轴线之间的间隔平均分配。
• space-around：每根轴线两侧的间隔相等；由于两端留有较小空间，在相同宽度下两端间距比边框间距小一半。
• stretch（默认值）：使各根轴线完全占据整个交叉轴空间。

弹性子元素属性

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值），其余所有项目的flex-shrink属性均为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)。

推荐采用该方法（即不建议单独定义三个分离的属性），因为浏览器会自动计算相关的值。

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

align-self属性赋予单个项目与其它项目不同的对齐方式能力，并支持并覆盖align-items属性的操作。其默认值设定为auto，并使该属性值使其继承父元素的align-items属性设置（若无父元素则等效于伸缩布局）。

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

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

媒体查询

通过 @media 查询机制，在不同设备类型及其特性变化的基础上设定相应的样式信息

@media 支持根据不同屏幕尺寸设定样式方案。尤其是当需要为响应式设计的网页定制不同尺寸样式时，这一机制在实践当中具有很高的价值。

在你重置浏览器大小的过程中（即调整其宽度和高度），网页会相应地重新呈现新的布局结构

浏览器支持

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

媒体查询语法

样式表中的CSS媒体查询

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

mediatype：设备类型；

expressions：设备特性；

在语法结构中，可能会有零个到多个[ and (设备特性)]。这些[ 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

\text{max-width}是一个常用的媒体查询属性——它的含义是：当媒体类型（如手机、平板）的宽度小于或等于指定的最大值时（即不超过该值），相关样式会生效；而如果媒体类型的宽度超过这一设定值，则该样式将不再起作用。
例如，在设计网站布局时，可以通过设置max-width来限制大屏幕设备上的内容显示范围。

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

当屏幕尺寸不超过480px时, 广告区域(.ads)将被隐藏.

2.最小宽度min-width

"min-width complements max-width in that when media dimensions reach or exceed a specified width, the style becomes effective."

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

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

3.多个媒体特性使用

Media Queries allow users to merge several key terms using the and keyword. 即，在一个Media Query中可包含从零到多个表达式（每个表达式又可包含零到多个关键词），并配合一种媒体类型。

当屏幕在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);

媒体类型

设备特性

当媒体查询结果为true时, 其对应的样式表或样式规则将按照正常的级联顺序执行应用操作.
即便媒体查询返回false, 标签指向的样式表会被下载（然而这些样式表不会被应用）.

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

逻辑操作符

• 通过 not, and, or 等逻辑操作符构建复杂的多条件式媒体查询。
• 仅当所有条件均满足时结果才成立。
• not 操作用于对当前 Media Query 的结果进行否定处理。
• only 操作仅在 Media Query 匹配结果有效时应用于特定样式设置。
• 如果选择了运用 not 或者 only 操作符则必须明确指定对应的 Media Type 类型。
• 此外你可以将多个 Media Query 列举出来并用逗号分隔；只要其中一个条件满足就会触发响应。

and

关键字可用于整合多个 media 属性的同时，并可将 media 属性与 media type 进行整合。基于 default 设置的基本 media 查询通常涉及将 single media 属性与所有 ... 结合。

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

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

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

目前的媒体查询仅在显示区域宽度达到700像素以上且在水平方向时生效。如果希望仅在电视上应用该功能，则可以通过与合并媒体属性相关联的操作来实现。

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

目前的 above media queries仅适用于电视端场景，并且在横向布局下其可视区域宽度达到或超过700像素

逗号

在媒体查询中使用逗号进行分隔与使用OR逻辑操作具有相同的功能。当采用逗号分隔的媒体查询时，只要任何一个查询返回真值，则样式将被应用。每个单独的媒体查询在列表中都是独立且互不影响的。这意味着通过逗号分隔的列表结构可以在不同属性、类型和状态间实现灵活管理。

举个例子来说, 假如你想在最小宽度设置为700像素或者是在横屏状态下应用样式组, 那么就可以这样编写代码段

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

如上文所述，在处理一个800像素宽的屏幕设备时，媒体语句会返回true；这是因为第一部分的主要体现是与该设备相关的属性设置相匹配。

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

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

not

not 关键字将影响整个 media query 结果，在 media query 条件不满足时返回 true（例如 monochrome 适用于彩色显示设备或者一个宽度为 600px 的屏幕适用于 min-width: 700px 的属性查找）。在逗号分隔的 media query 列表中, not 仅会对其中对应的单个 media query 产生否定效果。
not 关键字只能作用于完整的 media query 查询表达式, 而无法单独作用于其中的一部分。
例如, 在下面这个 query 中, not 最终会被计算处理。

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

等价于：

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

而不是：

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

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

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

等价于：

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

only

该关键字避免旧版本浏览器无法处理带有媒体属性的查询，并对特定样式表产生影响。

    <link rel="stylesheet" media="only screen and (color)" href="example.css" />