布局及其媒体查询

弹性盒子：

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

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

基本概念：

采用Flex布局的元素，称为Flex容器(flex container),简称容器。它的所有子元素自动成为容器成员，称为Flex项目(flex item),简称“项目”。

在Flexbox模型中，有三个核心概念：

flex容器：任何一个标签都可以指定为flex布局(display:flex)，其包含flex项

flex项：(也称flex子元素)，需要布局的元素

排列方向(direction)：决定了flex项的布局方向

容器属性（父元素）

1. $\textcolor{red}{flex-direction}$ 设置主轴的方向(即项目的排列方向)

   row(默认值)：主轴为水平方向，起点在左端

   row-reverse：主轴为水平方向，起点在右端

   column：主轴为垂直方向，起点在上沿

   column-reverse： 主轴为垂直方向，起点在下沿

2. $\textcolor{red}{flex-wrap}$ 如果在一条轴线上排不下，如何换行

   nowrap(默认值):不换行

   wrap：换行，第一行在上方

   wrap-reverse：换行，第一行在下方

3. $\textcolor{red}{flex-flow}$ 是flex-direction属性和flex-wrap属性的简写形式 默认值为row nowrap

   flex-flow：<flex-direction> || <flex-wrap>

4. $\textcolor{red}{justify-content}$:定义项目在主轴上的对齐方式

   flex-start(默认值)：左对齐

   flex-end：右对齐

   center：居中

   space-between：两端对齐，相邻项目之间的间隔都相等

   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔毕项目与边框的间隔大一倍。

5. $\textcolor{red}{align-items}$ 定义项目在交叉轴上的对齐方式

   flex-start：交叉轴的起点对齐

   flex-end：交叉轴的终点对齐

   center：交叉轴的中点对齐

   baseline：项目的第一个文字的基线对齐

   stretch(默认值)：如果项目未设置高度或者为auto，将占满整个容器的高度。

6. $\textcolor{red}{align-content}$ 定义了多根轴线的对齐方式，如果项目只有一个轴线，该属性不起作用

   flex-start：交叉轴的起点对齐

   flex-end：交叉轴的终点对齐

   center：交叉轴的中点对齐

   space-between：与交叉轴两端对齐，轴线之间的间隔平均分配

   space-around：每根抽线两侧的距离相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

   stretch(默认值)：轴线沾满整个交叉轴。

项目属性：

1. $\textcolor{red}{order} $定义项目的排列顺序，数值越小，排列越靠前，默认值为0。

2. $\textcolor{red}{flex-grow}$ 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

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

1. $\textcolor{red}{flex-shrink}$ 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

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

1. $\textcolor{red}{flex}$ 是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选

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

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

2. $\textcolor{red}{flex-basis}$ 定义了在分配多余空间之前，项目占据的主轴空间。

   浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

   它可以设为跟width或height属性一样的值，则项目将占据固定空间

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

   auto

   flex-start

   flex-end

   center

   baseline

   stretch

媒体查询：

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则

@media 媒体类型and （媒体特性）{你的样式}

1. max-width 最大宽度

2. min-width 最小宽度

3. 多个媒体特性使用

4. @media screen and (min-width:600px) and (max-width:900px){

5. 设备屏幕的输出宽度

6. not 关键词

   使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

   @media not print and (max-width: 1200px){样式代码}

7. only 关键词

8. only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如

9. <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

   在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

   <link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />