flex(弹性盒子,伸缩盒)
-是css中的又一种布局手段,它主要用来代替浮动来完成页面的布局
-flex可以使元素具有弹性,让元素可以根据页面的大小的改变而改变
-弹性容器
-要使用弹性盒,必须先将一个元素设置为弹性容器
-通过display来设置弹性容器
display:flex 设置块级弹性容器
display:inline-flex 设置为行内的弹性容器
-弹性元素
-弹性容器的直接子元素是弹性元素(弹性项)
注意:一个元素可以同时是弹性容器和弹性元素
一:弹性容器的属性
1:flex-direction 2:flex-wrap
3:flex-flow 4:justify-content
5:align-items 6:align-content
1:flex-direction: ; 指定容器中弹性元素的排列方式
可选值:
row 默认值,弹性元素在容器中水平排列(左向右)
主轴-自左向右
row-reverse 弹性元素在容器中反向水平排列(右向左)
主轴-自右向左
column 弹性元素纵向排列(自上向下)
主轴-自上向下