移动web开发—flex布局

1.0 flex布局原理

• flex 是 flexible Box 的缩写，意为"弹性布局"，任何一个容器都可以指定为 flex 布局。
• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
• 采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

2.0 父级元素常见属性

• flex-direction：设置主轴的方向

(row x轴 column y轴)--默认为row

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

• flex-start 从左开始排列
• flex-end 从右开始排列
• center 主轴居中对齐
• space-around 平分剩余空间
• space-between:先左右贴边,再平分剩余空间

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

• nowrap 不换行
• wrap 换行

• align-content：设置侧轴上的子元素的排列方式（多行）

• flex-start 从头部开始
• flex-end 从尾部开始
• center 居中显示
• stretch 拉伸

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

• flex-start 从头部开始
• flex-end 从尾部开始
• center 居中显示
• stretch 拉伸 总结 单行align-items 多行 align-content

• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-flow:row wrap; 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

• nth-child(n)公式

• E:nth-child 与 E:nth-of-type 的区别

• E:nth-child(n) 匹配父元素的第n个子元素E，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子