flex基本概念
先记住flex布局基于主轴(main axis)和侧轴(cross axis),主轴默认是水平轴,侧轴垂直于水平轴。
主轴起点(main-start),侧轴起点(cross-start)
属性:
flex-direction:是沿着主轴的排列布局,默认是水平向右
- row:默认水平向右
- row-reverse:水平向左
- column:垂直向下
- column-reverse:垂直向上
注意伸缩盒子如果nowrap则都排列在一行,宽度伸缩,所以当宽度超出屏幕时,设置的宽度则无效了,宽度开始收缩
如果所有元素都想挤在一行,就设置nowrap,宽度会自动收缩来适应窗体
flex-wrap:伸缩盒子是否卷起
nowrap:不卷起,挤在一行
wrap:卷起,多出来的开始排列在第二行
wrap-reverse:wrap反方向卷起
主轴对齐justify-content(主要用于弹性盒子里为一行)
弹性盒子的父盒子称为flexbox,子盒子称为items。
案例是flexbox里仅仅有一行items
flex-start, flex-end, center, space-between, space-around
沿主轴方向的排列
侧轴对齐align-items(主要用于弹性盒子里为一行)
flexbox里仅仅有一行items
当前行的侧轴方向排列
flex-start, flex-end, center, space-between, space-around
沿侧轴方向的排列
伸缩行对其align-content(弹性盒子里是多行)
flexbox里有多行items,当一行盛不下时
针对高度确定,高度很大,内容较小且多行,多行内容在大盒子里的整体的布局设定
flex-start, flex-end, center, space-between, space-around, stretch
items属性
order, flex-grow, flex-shrink, flex-basis, align-self
暂时没有用过这些属性,回头再详细说