在父级上设置display: flex;
父级称之为弹性容器;子级称之为弹性盒子。
如果父级没有设置高,则由子级来撑开;如果子级没有设置高,则子级的高和父级一样;
(在二者之间有一个没有设置高,则继承另一个的高)
属性名:justify-content;<--主轴对齐方式--> ----(水平排列)
附带的属性值有:
flex-start;默认值从左到右 flex-end; 从右到左 center;水平居中
(注:上三个如果部设置外边距或内边距,那么弹性盒子就会挨着)
space-between;(均匀排列,间距在弹性盒子之间)
space-around(均匀排列,间距在弹性盒子两侧)
(注:虽然这个也是均匀排列,但两个弹性盒子之间的间距是弹性盒子一侧间距的两倍。)
space-evenly(均匀排列,弹性盒子和容器间距相等)
属性名:align-items<--侧轴对齐方式--> -----垂直排列(给弹性容器设置)控制所有弹性盒子
align-self 单独控制某一个弹性盒子(给弹性盒子设置)
附带的属性值有:
stretch;拉伸 弹性盒子在侧轴方向没有尺寸才能拉伸
center;垂直居中
flex-srart;弹性容器左上角排列
flex-end;弹性容器左下角排列