Flex布局

Flex布局

flex布局父项常见属性

flex-direction:设置主轴的方向

• 在flex布局中，是分为主轴和侧轴两个方向

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下

• 属性值

  row 默认从左到右 （x轴为主轴）

  row-reverse 从右到左

  column 从上到下 （设y轴为主轴）

  column-reversr 从下到上 （反转）123 / 321

justify-content:设置主轴上的子元素排列方式

• 属性值

  flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右

  flex-end 从尾部开始排列

  center 在主轴居中对齐（如果主轴是x轴 则水平居中）

  space-around 平分剩余空间

  space-between 先两边贴边 再平分剩余空间（重要★）

flex-wrap:设置子元素是否换行

• 默认情况下，项目都排在一条线上（又称"轴线"）。flex-wrap属性定义，flex布局中默认是不换行的
• 默认子元素不换行的，如果装不下，会缩小元素的宽度

align-content:设置侧轴上的子元素的排列方式(多行)

• 出现换行情况（多行），在单行情况下没有效果
• 属性值

flex-start 默认值在侧轴的头部开始排列

flex-end 在侧轴的尾部开始排列

center 在侧轴中间显示

space-around 子项在侧轴平分剩余空间

space-between 子项在侧轴先分布在两头，再平分剩余空间

stretch 设置子项元素高度平分父元素高度

align-items:设置侧轴上的子元素排列方式(单行)

• 属性值

flex-start 默认值 从上到下

flex-end 从下到上

center 挤在一起居中（垂直居中）

stretch 拉伸 （x轴作为主轴拉伸不能给高度，y轴作为主轴不能给宽度）

align-content和align-items区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸

align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值

总结就是单行align-items 多行找align--content

flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap,是它们的复合属性

flex-flow: row wrap;

flex布局子项常见属性

flex 子项目占的份数

align-self 控制子项自己在侧轴的排列方式

order属性定义子项的排列顺序（前后顺序）