CSS学习笔记四

flex布局

CSS3弹性盒子（Flexible Box 或Flexbox），是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备是，元素可以预测的运行行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

弹性盒模型分为老版和新版：
老版本我们通常称之为box
新版本我们通常称之为flex

flex的两种写法

• old：-webkit-box
• new：-webkit-flex / flex

老版本：
容器

• 容器的布局方向：

  -webkit-box-orient：horizontal/vertical（控制主轴是哪一根）

• 容器的排列方向：
  -webkit-box-direction：normal/reverse（控制主轴方向）

• 富裕空间管理：
  只决定富裕空间的位置，不给项目区分配空间
  主轴：
  -webkit-box-pack：（start|end|center|justify）（左右边）
  侧轴：
  -webkit-box-algin：（start|end|center）

项目

• box-flex
• .box-ordinal-group

新版本：
容器

• 容器的布局方向：

  flex-direction：row/column（控制主轴是哪一根）

• 容器的排列方向（通过一个属性，四个属性值控制布局和排列方向）：
  flex-direction：row-reverse/column-reverse（控制主轴方向）

• 富裕空间管理：
  只决定富裕空间的位置，不给项目区分配空间
  主轴：
  justify-content：（flex-start|flex-end|center|space-between|space-around）（正反方向）
  侧轴：
  align-items：（flex-start|flex-end|center||baseline|stretch）

项目

• order：排序
• flex-grow：放大
• flex-shrink：缩小
• flex-basis：固定大小
• align-self