flex方法的总结(都是作用于父亲盒子)

flex作为一种的可以代替浮动的方法,被越来越广泛的使用,我这段时间就是在进行这一方面的学习,这是我对这是flex的总结(在移动端绝大部分使用flex方法来代替浮动)

1.主轴排列方法

在盒子中默认的是主轴排列,他是以X轴来作为主轴
1.给父亲使用display:flex;

2.jusrify-content:cneter;

3.justify-content: space-between; 左右两侧无缝隙

4.justify-content: space-around; 两倍关系

5.justify-content: space-evenly; 缝隙均等

1.默认的对齐方式-stretch 2.顶对齐 flex-start

3.align-items: center; (重点)

1.align-content: space-between;

2.align-content: space-around;

3.align-content: space-evenly;

4.align-content: center;