CSS学习记录24

CSS Flexbox

CSS Flex 布局模块

在 Flexbox 布局模块之前，可用的布局模式有以下四种：

• 块（Block），用于网页中的部分（节）
• 行内（Inline），用于文本
• 表，用于二维表数据
• 定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

Flexbox元素

如需开始使用Flexbox模型，您需要首先定义Flex容器。举例：含有三个 flex项目的 flex 容器：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

父元素（容器） 

通过将display属性设置为 flex， flex容器将可伸缩：

.flex-container {
  display: flex;
}

以下为讲解用到的flex容器属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-iems
• align-content

flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。举例：

column 值设置垂直堆叠flex 项目（从上到下）：

.flex-container {
  display: flex;
  flex-direction: column;
}

 column-reverse 值垂直堆叠flex项目（但从下到上）：

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

row 值水平堆叠 flex 项目（从左到右）：

.flex-container {
  display: flex;
  flex-direction: row;
}

row-reverse 值水平堆叠 flex 项目（但从右到左）：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

flex-wrap属性

flex-wrap 属性规定是否应该对 flex 项目换行。 下面的例子包含 12 个 flex 项目，以便更好地演示 flex-wrap 属性。

wrap 值规定flex 项目将在必要时进行换行：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

nowrap 值规定将不对flex项目换行（默认）：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

wrap-reverse 值规定如有必要，弹性项目将以相反地顺序换行：

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-flow 属性 

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

justify-content 属性

justify-content 属性用于对齐 flex 项目：

center 值将flex 项目在容器的中心对齐：

.flex-container {
  display: flex;
  justify-content: center;
}

flex-start 值将flex 项目在容器的开头对齐（默认）：

.flex-container {
  display: flex;
  justify-content: flex-start;
}

flex-end 值将flex 项目在容器的末端对齐：

.flex-container {
  display: flex;
  justify-content: flex-end;
}

space-around 值显示行之前、之间和之后带有空格的 flex 项目：

.flex-container {
  display: flex;
  justify-content: space-around;
}

space-between 值显示行之间有空格的 flex 项目：

.flex-container {
  display: flex;
  justify-content: space-between;
}

align-items 属性

align-items 属性用于垂直对齐 flex 项目。 在本例中将使用 200 像素高的容器，以便更好地演示 align-items 属性。

center 值将 flex 项目在容器中间对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

flex-start 值将 flex 项目在容器顶部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

flex-end 值将弹性容器在容器底部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

stretch 值拉伸 flex 项目以填充容器（默认）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

baseline 值使 flex 项目基线对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

align-content 属性 

align-content 属性用于对齐弹性线。在本例中，使用 400 像素高的容器，并将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。

space-between 值显示的弹性线之间有相等的间距：

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-between;
}

space-around 值显示弹性线在其之前、之间和之后带有空格：

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-around;
}

stretch 值拉伸弹性线以占据剩余空间（默认）：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

center 值在容器中间显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

flex-start 值在容器开头显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

flex-end 值在容器的末尾显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

完美的居中

将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

子元素（项目）

 flex 容器的直接子元素会自动成为弹性（flex）项目。下面的元素代表一个灰色 flex 容器的四个蓝色 flex 项目。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

用于弹性项目的属性有：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self 

order 属性

order 属性规定 flex 项目的顺序。代码中的首个 flex 项目不必再布局中显示为第一项。 order 值必须使数字，默认是0。

order 属性可以改变 flex 项目的顺序：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。 该值必须是数字，默认值是0。

举例：使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

flex-shrink 属性 

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。该值必须是数字，默认值是0。

举例：不让第三个弹性项目收缩得与其他弹性项目一样多：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

flex-basis 属性 

flex-basis 属性规定 flex 项目的初始长度。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

flex 属性 

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

举例：使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为200像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。 align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

CSS媒体查询 

CSS3中的媒体查询扩展了 CSS2媒体类型的概念： 它们并不查找设备类型，而是关注设备的能力。媒体查询可用于检擦许多事情，例如：

• 视口的宽度和高度
• 设备的宽度和高度
• 方向（平板电脑/手机处于横向还是纵向模式）
• 分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

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

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为true，则查询结果为true。当媒体查询为true时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

您还可以针对不同的媒体使用不同的样式表：

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

CSS 媒体类型

媒体类型的简单实例

使用媒体查询的一种方法是在样式表内由一个备用的CSS部分。下面的例子在视口宽度为480像素或更宽时将背景颜色更改为浅绿色（如果视口小于480像素，则背景颜色会是粉色）：

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

下例显示了一个菜单，如果视口的宽度为480像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于480像素，则该菜单将位于内容的顶部）：

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

CSS 媒体查询-实例

菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

列的媒体查询

媒体查询的常见用法时创建弹性布局。在本例中，创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

/* 创建彼此相邻浮动的四个相等的列 */
.column {
  float: left;
  width: 25%;
}

/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素：

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

用媒体查询改变字体

还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

/* 如果屏幕尺寸超过 600 像素，把 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕大小为 600px 或更小，把 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

方向：人像/风景

媒体查询还可以用于根据浏览器的方向更改页面的布局。您可以设置一组CSS属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的横屏：

举例：如果方向处于横向模式，则使用浅蓝背景色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

最小宽度到最大宽度

您还可以使用 max-width 和 min-width 属性设置最小宽度和最大宽度。

例如：当浏览器的宽度在 600 到 900 像素之间时，更改<div>元素的外观：

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

使用附加值：在下面的例子中，使用逗号（类似OR运算符）将附加的媒体查询添加到已有的媒体查询中：

/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}