移动WEB flex 布局

一、简介

• 又名伸缩布局、弹性布局、伸缩盒布局、
• 更适用于移动端
• 布局原理，添加display: flex;
• 父盒设为flex后，子元素的float、clear、vertical-align属性失效

二、常见父项属性

flex-direction 设置主轴方向

• 属性row（默认）
• row-reverse
• column
• column-reverse

justily- content 主轴上的子元素排列方式

• flex-start
• flex-end
• center
• space-around 平分剩余空间
• space-between 两边贴边，中间平分

flex-wrap 子元素是否换行

• nowrap 默认
• wrap

align-content 子元素的排列方式（多行）

• flex-start
• flex-end
• center
• space-around
• space-between
• stretch 拉伸

align-items 侧轴上的子元素排列方式（单行）

• flex-start
• flex-end
• center
• stretch 拉伸

flex-flow 复合flex-direction、flex-wrap`

三、常见子项属性

flex 在父盒子中所占份数

• 默认0

align-self 在父盒侧轴上的排列方式

• 高于父盒的align-items属性

order 在父盒中的排列顺序

• 默认0，设为负数既可排在前面