flex弹性布局
父容器属性
-
开启弹性布局 display:flex;
开启弹性布局:默认按照从左至右的顺序排列。
弹性布局有两根轴,“主轴”and“交叉轴”
主轴:项目默认按照主轴的方向排列。
交叉轴:与主轴交叉的就是交叉轴。
子项目的未设大小:主轴方向的尺寸靠内容撑出,交叉轴的尺寸尽量铺满整个容器。 -
改变主轴方向 flex-direction: row | row-reverse | column | column-reverse;
row:默认值,主轴为x轴,项目从左至右排列。
row-reverse:主轴为x轴,项目从右至左排列。
column:主轴为Y轴,项目从上至下排列。
column-reverse:主轴为Y轴,项目从下至上排列。 -
主轴对齐方式 justify-content: center| flex-start | flex-end | space-evenly | space-around | space-between;
center居中。flex-start:对齐开始的位置。flex-end:对齐结束的位置。
space-evenly:分散对齐1:项目与容器边框之间|项目之间距离等分。
space-around:分散对齐2:项目之间距离等分,项目与容器边框之间的距离是项目之间的一半。
space-between:两端对齐:项目之间距离等分,项目与容器边框之间没有距离。 -
交叉轴对齐方式 align-items:center | fl