Flex笔记---Day01

Flex

flex弹性布局

更多使用在  移动端

相对更简单

将父元素设置为flex布局后，子元素的float clear vertical-align属性会失效

flex布局的元素 成为容器 子元素成为flex ‘ 项目 ’

总结：通过给父盒子添加flex属性，来控制盒子的位置和排列方式

justify-content: space-around; 平分空间

flex: 1; 不设置宽度后 也会平分

reverse 翻转

flex-direction

把其中一个设置成**主轴** 另一个就成了副轴

flex-direction: column; 竖的设置为主轴子元素是跟着 主轴 排列的

justify-content 要确定好主轴后使用！！

justify-content: flex-end; 右对齐

justify-content: center; 子元素居中对齐

justify-content: space-between; 两边贴边平分

flex-warp 设置子元素是否换行

默认是不换行

	如果放不开，会缩小子元素的宽度，放到父元素里面

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

align-items center y轴的居中

水平 垂直方向的居中      两个同时使用

align-items stretch 拉伸

使用时去掉子元素高度 就会拉伸到父元素的高度

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

**align-items ** 和 align-content 区别

flex-flow

 flex-direction和 flex-warp 的结合

子项 的属性

• flex子项目占的份数

  ​	flex定义项目分配剩余空间，flex表示占多少份
  

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

  align-self: flex-end;  单独一个设置排列方式
  

  
  

  order 定义子项的排列顺序(前后顺序)

补充：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。