【弹性盒子·@media·CSS】

弹性盒子

弹性盒子就是按照行或者列来布局元素的一种方式，让元素更好地适应不同父容器的大小。

flex-direction 属性

指定了弹性子元素在父容器中的排列方向和顺序。

javascript 复制代码

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap 属性

用于指定弹性盒子的子元素换行方式。

javascript 复制代码

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-items 属性

用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

javascript 复制代码

 #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items:flex-end;
      }

javascript 复制代码

 #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items:stretch;
      }

align-content 属性

控制多行的对齐方式，如果只有一行则不会起作用。

javascript 复制代码

 align-content: stretch;

@media 媒体查询

媒体查询就像是样式表中的 if 语句，通过判断表达式的真假来执行特定的分支（加载特定的样式）。

@media 可以直接写在 CSS 样式中，或者可以针对不同的媒体设备，从外部链入不同的 stylesheets（外部样式表）

javascript 复制代码

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

一个完整的媒体查询由以下五部分组成：

必须是以 @media 开头。
使用 mediatype 指定媒体（设备）类型。
使用 and | not | only 逻辑操作符构建复杂的媒体查询。
使用 media feature 指定媒体特性。
CSS-Code 位置是要设置的 CSS 样式。
mediatype （媒体类型）取值范围

逻辑操作符取值范围

media feature （媒体特性）常用取值

javascript 复制代码

  @media screen and (max-width: 500px) {
        body {
          background-color: red;
        }
      }
  @media screen and (min-width: 800px) {
        body {
          background-color: green;
        }
      }

不同的媒体设备，从外部链入不同的 stylesheets（外部样式表）

javascript 复制代码

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