【CSS】Flex 用法，以及常用属性

Flex 布局特点

1. 与方向无关
2. 空间自动分配、自动对齐
3. 简单的线性布局

 

flex container 的属性 （常用的只有4个）

• flex-direction 方向
• flex-wrap 换行
• flex-flow 上面两个的简写 （很少用这个，一般都是单独用上面两个，所以其实只有5个属性）
• justify-content 主轴方向对齐方式
• align-items 侧轴对齐方式
• align-content 多行/列内容对齐方式（用得较少）

 

justify-content 的值详解：

space-between（多余的空间 放到中间）

space-around（）

flex-start（都往起点靠）

flex-end（都往终点靠）

center（居中）

 

align-items 的值详解：

stretch（伸展，默认值，意思是把所有的元素伸开，跟最高的元素一样高）

flex-start（往侧轴的起点靠。用得多）

flex-end（都往下靠）

center（都往中间。用得多）

baseline（用得少）

 

 

flex item 的属性

• flex-grow 增长比例（空间过多时）
• flex-shrink 收缩比例（一般不用，空间不够时）
• flex-basis 默认大小（一般不用）
• flex 上面三个的缩写
• order 顺序（代替双飞翼）
• align-self 自身的对齐方式