【CSS】盒子模型、CSS3的弹性盒子Flex布局

---

什么是盒子模型

• 所有HTML元素可以看作盒子
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

说明:

• Margin 外边距 清除边框外的区域，外边距是透明的
• Border边框 围绕在内边距和内容外的边框
• Padding内边距 清除内容周围的区域，内边距是透明的
• Content内容 盒子的内容，显示文本和图像

---

盒子模型分类

盒子模型其实有两种,一种是W3C标准的盒子模型,一种是IE盒子模型,除了IE8以下的浏览器,其他浏览器默认采用W3C标准的盒子模型。

1、W3C标准盒子模型

默认情况下为标准盒子模型

• 标准模式下，box-sizing:content-box; 将采用标准模式的盒子模型标准。
• 一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)

CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高

2、IE盒子模型(怪异盒子模型)

• 怪异模式下，box-sizing:border-box; 将采用怪异模式的盒子模型标准。
• 一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding。

CSS中的宽:（width）=内容（content）的宽+（border+padding）*2

CSS中的高（height）=内容（content）的高+（border+padding）*2

CSS3指定盒子模型种类

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

• content-box指定盒子模型为W3C（标准盒模型）

• border-box为IE盒子模型（怪异盒模型）

---

弹性盒子布局(display: flex)属性

• Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。
• 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
• 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。

强大之处：

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态的将元素装入容器

基本概念

• Flex容器(简称容器)： 采用Flex布局的元素。
• Flex项目(简称项目)： Flex容器里面的所有子元素自动成为容器成员。

三个核心概念：

• flex项：需要布局的元素
• flex容器：包含flex项
• 排列方式(direction)：决定了flex项的布局方式

Flex容器属性

flex-direction：

• row(默认值)：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：

• nowrap(默认)：不换行。
  

• wrap：换行，第一行在上方。
  

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

justify-content：

• flex-start(默认值)：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  

align-items：

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。
  
  

align-content：
定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用。

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch(默认值)：轴线占满整个交叉轴。
  

Flex项目属性

order属性：

• 项目的排列顺序，数值越小，排列与靠前，默认为0

flex-grow：

• 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink：

• 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
• 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
• 负值对该属性无效。
  

flex-basis：

• 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
• 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex：

• flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self：

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

注：弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。