FlexBox布局属性笔记

display: 表示为伸缩容器

参考属性：

• flex |设置为容器

• inline-flex| 行内元素设置

  
  
  

  容器模型

---

flex-direction: 设置容器的方向

参考属性：

• row | 水平排列 从左往右(图3)
• column | 垂直排列 从上往下(图2)
• row-reverse | 反向水平排列 从右往左 (图4)
• column-reverse | 反向垂直 从下往上 (图1)

flex-direction

---

flex-wrap: 容器空间不足时是否换行显示

参考属性：

• nowrap | 不允许换行
• wrap | 换行
• wrap-reverse | 反向排序并向上换行

wrap

---

flex-flow: 该属性是direciton和wrap的缩写属性,是两个属性的缩写

• 默认值为row nowrap

---

justify-content:沿主轴对齐的方式(主轴方向参考flex-direciton属性来确定)|

参考属性：

• flex-start |从主轴起始位置对齐 (左对齐)
• flex-end | 从主轴结束位置对齐 (右对齐)
• center | 向主轴方向中间靠齐 ( 居中)
• space-between| 平均分布在主轴上 第一个view紧贴主轴起始点,最后一个view紧贴主轴结束点 (两端对齐)
  -space-around| 平均分布 主轴两端不紧贴 (两端对齐但不贴边,但每个项目两侧的间隔相等)

justify-content

---

align-items: 对于交叉轴的位置

• flex-start | 起始对齐
• flex-end | 结束对齐
• center | 居中
• baseline | 基线对齐 也就是基于内容对齐
• stretch | 拉伸铺满

align-items

---

align-content: 在开启换行后,或者多行展示主轴内容后生效在交叉轴上排列的属性

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

align-content

本文参考了 阮一峰的Flex 布局教程：语法篇
图片均来自阮一峰的博客