flex弹性布局

flex弹性布局

　　借鉴于:Flex 布局教程：语法篇 - 阮一峰的网络日志

• flex与flex-grow的区别，都是分配剩余空间，但+grow就不会加入自生大小，而单独的flex就会加入自生空间。

• 容器：父元素

  给谁添加flex谁就是容器，子元素就是项目

  功能：1.所有的项目默认情况在一行显示。

  2.如果所有的项目宽度之和大于容器的宽度。项目会自动缩小。 即不会超出容器的尺寸（不会换行）

• 项目：子元素

• 主轴：X轴（默认值）

• 交叉轴：Y轴（默认值）

设置换行

• flex-wrap：nowrap 不换行（默认值）

  

• flex-wrap：wrap 行换（当项目尺寸之和大于宽度才会起效）

• flex-wrap：wrap-reverse 倒序换行（起始位置改为底部且主轴为X轴）

  

 

主轴(x轴)对齐方式

• justify-content：flex-start 【默认值】（主轴对齐方式，左对齐）

• justify-content：flex-end（主轴对齐方向，右对齐）

• justify-content：center（主轴对齐方向，居中）

• justify-content：space-between（主轴对齐方向，两端对齐）

• justify-content：space-around（主轴对齐方向，分散对齐）

• justify-content：space-evenly（主轴对齐方向，平均分配项目内容）

交叉轴(y轴)对齐方式

• align-items：center 交叉轴居中

• align-items：flex-start 交叉轴底部开始

• align-items：flex-end 交叉轴底部倒序开始

• align-items：baseline 交叉轴基线对齐

• align-items：stretch 默认值，当项目高度为auto即未设置高度时，项目的高就是容器的高（即自动盛满容器）