随手笔记

flex布局（弹性布局）

父容器，子项目 分为主轴和侧轴（默认横向的为主轴，纵向的为侧轴）

父项常见属性

通过给父盒子添加flex属性，来控制子盒子的布局和排列方式
①flex-direction:row/cloumn;

.box {
	display:flex;
	flex-direction:cloumn;
}

主轴上的元素居中：justify-content:center;

.box {
	display:flex;
	flex-direction:row;
	justify-content:center;
}

侧轴上的元素居中：algin-items:center; （单行）

.box {
	diplay:flex;
	flex-direction:row;
	algin-items:center;
}

换行：flex-wrap:wrap;

.box {
	display:flex;
	flex-wrap:wrap;
}

②algin-content:center; （多行，对单行没有用）

.box {
	display:flex;
	flex-wrap:wrap;
	algin-content:center;
}

子项常见属性

①flex属性：定义子属性分配剩余空间，用flex来表示占多少份数

  .item {
      flex:<number> ;
  }

②algin-self：控制子项自己在侧轴上的排列方式

.item {
	algin-self:flex-end;
}

③order属性定义项目的排列顺序
默认第一个盒子是的序号是0，注意：和z-index效果不同，z-index是堆叠的叠罗汉的效果

.item {
	order:-1;
}