【前端系列教程之CSS3】08_Flex布局和媒体查询

一、Flex 布局(核心)

1.1 Flex 布局是什么

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

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

.box{  
    display: flex;
}

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

.box{  
    display: inline-flex;
}

        Webkit 内核的浏览器，必须加上-webkit前缀。

.box{  
    display: -webkit-flex; /* Safari */  
    display: flex;
}

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

总结如下：

        （1）.对于它们的内部的项目没有任何区别，也就是效果完全一样。

        （2）.对于容器div自身来说，一个表现为块级元素，一个表现为块级内联元素。

1.2 基本概念

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

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

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

1.3 容器样式属性

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

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

flex-direction属性

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

.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-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（默认值）：轴线占满整个交叉轴。

1.4 项目样式属性

        以下6个属性设置在项目上。

• order

• flex-grow

• flex-shrink

• flex-basis

• Flex

• align-self

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属性是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属性，如果没有父元素，则等同于stretch。

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

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

二、媒体查询 Media Query

2.1 css3 media媒体查询概述

        随着响应式设计模型的诞生，Web网站又要发生翻天覆地的改革浪潮，如今淘宝，凡客，携程等等很多公司都已经在使用这项技术，并完美的应用在了自己的网站上了。

为啥有媒体查询:

        移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。

        Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满）。

什么是媒体查询?

        媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。

        css2: media type ,media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。

        css3: media query ,media query是CSS3对media type的增强，事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。

2.2 使用媒体查询的准备工作

设置Meta标签

        首先我们在使用Media query的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

加载兼容文件JS

        因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

        现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

        为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

        不过最近又发现了一个更给力的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

        怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

2.3 CSS3 媒体查询用法

多媒体查询语法

        多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

        如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

        除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

all: 所有设备，这个应该经常看到。

        你也可以在不同的媒体上使用不同的样式文件：

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

        demo如下：当前屏幕的宽度大于等于400px时应用 styleA.css样式文件。

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

CSS3 多媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

多媒体查询简单实例

        使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

        以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

多媒体查询综合案例

        在不同屏幕上元素显示宽度改变案例

        在1200px像素以上的视口,显示1170px 大屏幕显示器

        在992px-1200px的视口上,显示970px 中等屏幕显示器

        在768px-992px的视口上,显示750px pad设备

        在低于768px的视口上,显示100%宽度 移动设备

        表达式语法:

                表达式：像素

                min-width: 最小宽度

                max-width: 最大宽度

                min-height: 最小高度

                max-height: 最大高度

<!doctype html>
<html>

<head>
    <title>页面标题</title>
    <meta charset="utf-8">
    <!-- 为了适配移动端,如果想要使用media query兼容移动端,必须添加这句话 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 为了IE9以下的浏览器兼容HTML5和CSS3 -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!-- 让IE浏览器用最新的文档模式来渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

    <!-- 
        在1200px像素以上的视口,显示1170px       大屏幕显示器
        在992px-1200px的视口上,显示970px        中等屏幕显示器
        在768px-992px的视口上,显示750px         pad设备
        在低于768px的视口上,显示100%宽度         移动设备
        @media not|only mediatype and (expressions) {
            CSS 代码...;
        }

        min-width: 最小宽度
        max-width: 最大宽度
        min-height: 最小高度
        max-height: 最大高度
     -->
     <style>
        div{
            border: 1px solid black;
        }
        
        /* 代表在不同的设备上呈现不同的效果 */
        @media screen and (min-width: 1200px) {
            .div1{
                width: 1170px;
                background: red;
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px) {
            .div1{
                width: 970px;
                background: yellow;
            }
        }

        @media screen and (min-width: 768px) and (max-width: 992px) {
            .div1{
                width: 750px;
                background: blue;
            }
        }

        @media screen and  (max-width: 768px) {
            .div1{
                width: 100%;
                background: skyblue;
            }
        }
    </style>

</head>

<body>
    <!-- 在我们之前做第一阶段和第二阶段项目的时候,我们都是采用的固定布局 -->
    <div class="div1">
        在不同的设备上,呈现不同的宽度.
    </div>
</body>

</html>

响应式导航栏实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
</style>
</head>
<body>

<ul class="topnav">
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li class="right"><a href="#about">关于</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>响应式导航栏实例</h2>
  <p>在屏幕宽度小于 600px 会重置导航栏。</p>
  <h4>重置浏览器窗口大小，查看效果。</h4>
</div>

</body>
</html>

媒体查询结合Flex布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <!-- IE9版本以下的浏览器兼容H5和CSS3的media query -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!-- 让IE使用最新的文档模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <!-- 
        @media not|only mediatype and (expressions) {
            CSS 代码...;
        }
     -->
    <style>
        body{
            margin: 0;
        }
        .responseDiv{
            border: 1px solid black;
            /* height: 120px; */
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        @media screen and (min-width: 1200px){
            .responseDiv{
                width: 1170px;
                /* background: red; */
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px){
            .responseDiv{
                width: 970px;
                /* background: yellow; */
            }
        }

        @media screen and (min-width: 768px) and (max-width: 992px){
            .responseDiv{
                width: 750px;
                /* background: skyblue; */
            }
        }

        @media screen and (max-width: 767px){
            .responseDiv{
                width: 100%;
                /* background: springgreen; */
                box-sizing: border-box;
            }
        }

        .responseDiv>div{
            width: 300px;
            height: 200px;
            margin-bottom: 20px;
        }

        .item1{
            background: purple;
            /* flex-grow: 1; */
        }

        .item2{
            background: yellow;
            /* flex-grow: 1; */
            /* flex-shrink:4; */
        }

        .item3{
            background: blue;
            /* order: -2; */
            /* flex-grow: 2; */
        }

        .item4{
            background: skyblue;
            /* flex-grow: 1; */
        }

        .item5{
            background: hotpink;
            align-self: flex-start;
        }

        .item6{
            background: slateblue;
            /* order: -6; */
        }
    </style>
</head>
<body>
    <!-- 
        定义一个div
            在1200px像素以上的视口,显示1170px       大屏幕显示器
            在992px-1200px的视口上,显示970px        中等屏幕显示器
            在768px-992px的视口上,显示750px         pad设备
            在低于768px的视口上,显示100%宽度         移动设备
        表达式语法:
		表达式：像素
			min-width: 最小宽度
			max-width: 最大宽度
			min-height: 最小高度
			max-height: 最大高度
     -->
     <div class="responseDiv">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
     </div>
</body>
</html>

三、多列与用户界面

3.1 透明度设定

        使用CSS很容易创建透明的图像。

        注意：CSS Opacity属性是W3C的CSS3建议的一部分。

img{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

        IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。

        opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

        opacity与通过rgba()设定透明度的区别：

                前者同时作用于元素及其标签内容，后者只是作用于元素本身

3.2 CSS3 多列

        CSS3 可以将文本内容设计成像报纸一样的多列布局。

CSS3 多列属性

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列;目前浏览器都不支持
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写

CSS3 创建多列

        column-count 属性指定了需要分割的列数。

        以下实例将 <div>元素中的文本分为 3 列：

.newspaper
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
}

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>

CSS3 多列中列与列间的间隙

        column-gap 属性指定了列与列间的间隙。

        以下实例指定了列与列间的间隙为 40 像素：

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

CSS3 列边框:

/* column-rule-style 属性指定了列与列间的边框样式：*/
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

/*column-rule-width 属性指定了两列的边框厚度:*/
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

/*column-rule-color 属性指定了两列的边框颜色：*/
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

/*column-rule 属性是 column-rule-* 所有属性的简写。*/
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

指定元素跨越多少列

        以下实例指定<h2>元素跨越所有列：

        默认值是1,可选值是all；

<div class="newspaper">
	<h2>英国维斯米斯特教堂碑文</h2>
	当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

h2{
	column-span:all;
	-webkit-column-span:all; /* Safari and Chrome */
}

指定列的宽度

        column-width 属性指定了列的宽度。

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

3.3 CSS3 用户界面

        在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

• resize

• box-sizing

• outline-offset

CSS3 调整尺寸(Resizing)

        resize属性指定一个元素是否是由用户调整大小的。

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

CSS3 box-sizing 属性

        box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

CSS3 外形修饰（outline-offset ）

        outline-offset属性设置轮廓框架在 border 边缘外的偏移

        Outlines在两个方面不同于边框：

• Outlines 不占用空间

• Outlines 可能非矩形

值	描述
length	轮廓与边框边缘的距离。