元素是否自动换行(flex-wrap):用来设置子元素是否自动换行。
弹性定位容器内的子元素可以设置以下CSS样式:
扩展量(flex-grow):必须参数,用来设置当前元素相对于其他元素的增长量,默认值为 0,即如果存在剩余空间,也不自动放大。
如果所有元素的扩展量都设置为1,将等分剩余空间。如果一个元素的扩展量设置为2,其他元素都为1,则前者占据的剩余空间将是其他项的2倍,如下图所示:
收缩量(flex-shrink):必须参数,用来设置当弹性容器空间不足时,该元素相对于其他元素的收缩量,默认值为 1。如果所有元素的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个元素的flex-shrink属性为0,其他元素都为1,则空间不足时,前者不缩小。
基准长度(flex-basis):必须参数,元素的基准长度定义了父容器在分配多余空间之前,当前元素占据的主轴空间(main size,如果是横向排列,则指父容器在水平方向的空间,如果是纵向排列,则指父容器在垂直方向的空间)。浏览器根据这个属性,计算主轴是否有多余空间。合法值为 auto(默认值,表示根据其他情况自动伸缩),或者以具体的值加 "%"、"px"等单位的形式,表示该元素将占据固定空间。
显示顺序(order):属性用来设置元素在容器中出现的顺序,您可以通过具体的数值来定义元素在容器中的位置,默认值为 0。下图所示的四个普通的面板组件,在弹性面板里从左至右的正常插入顺序是panel1、panel2、panel3、panel4,但通过设置这四个面板的显示顺序,将panel1和panel4的显示位置进行了调换。
对齐方式(align-self):该属性允许您为某个特定的元素设置不同于其它元素的对齐方式,该属性可以覆盖父容器组件(弹性面板)里的垂直对齐属性的值。该属性的可选顶部对齐(flex-start)、底部对齐(flex-end)、居中对齐(center)、基线对齐(baseline)、自动伸展(stretch)。
由于弹性定位的自动伸缩特性,且易于实现子元素的水平和垂直对齐,目前很多主流的前端UI框架都大量地采用了该定位方式。