flex(弹性盒、伸缩盒)
是css中的又一种布局手段,它主要用来代替浮动来完成页面的布局;flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变。
弹性容器:要使用弹性盒,必须先将一个元素设置为弹性容器,我们通过display来设置弹性容器:
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
弹性元素:弹性容器的子元素是弹性元素(弹性项),弹性元素可以同时是弹性容器。
flex-direction 指定容器中弹性元素的排列方式,可选值:
row:默认值,弹性元素在容器中水平排列(左向右)
row-reverse:弹性元素在容器中反向水平排列(右向左)
column:弹性元素纵向排列(自上向下)
column-reverse:弹性元素纵向排列(自下向上)
flex-grow 指定弹性元素的伸展的系数,当父元素有多余的空间时,子元素如何伸展,父元素的剩余空间,会按照比例进行分配,默认值为1。
flex-shrink 指定弹性元素的收缩系数,当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩,默认值为1。
flex-wrap 设置弹性元素是否在弹性容器中自动换行,可选值:
nowrap:默认值,元素不会自动换行
wrap:元素沿着辅轴方向自动换行
wrap-reverse:元素沿着辅轴反方向换行
flex-flow wrap和direction的简写属性,可以同时写两个属性。
flex-basis 指定的是元素在主轴上的基础长度,如果主轴是横向的,则该值指定的就是元素的宽度,如果主轴是纵向的,则该值指定的就是元素的高度,可选值:
auto:默认值,表示参考元素自身的高度或宽度。
如果传递了一个具体的数值,则以该值为准。
flex可以设置弹性元素的三个样式,语法为:
flex 增长 缩减 基础;
order决定弹性元素的排列顺序,order:1,2,3·····
justify-content 如何分配主轴上的空白空间,可选值:
flex-start:元素沿着主轴起边排列
flex-end:元素沿着主轴终边排列
center:元素居中排列
space-around:空白分布到元素两侧
space-between:空白均匀分布到元素间
space-evenly:空白分布到元素的单侧
align-items 元素在辅轴上如何对齐,设置元素间的关系,可选值:
stretch:默认值,将元素的长度设置为相同的值
flex-start:元素不会拉伸,沿着辅轴起边对齐
flex-end:沿着辅轴终边对齐
center:居中对齐
baseline:基线对齐
align-content 辅轴空白空间的分布
align-self:用来覆盖当前弹性元素上的align-items