CSS 弹性布局 flex 属性详解

flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。

1、flex-grow

定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

item 1

item 2

item 3

即当有多余空间时item1、item2、和item3以1:2:3的比例放大。

2、flex-shrink

定义了当容器空间不足时,item是否缩小。默认值为1,表示当空间不足时,item自动缩小,其可能的值为整数,表示不同item的缩小比例。

3、flex-basis

表示项目在主轴上占据的空间,默认值为auto。如下代码

item 1

item 2

item 3

其效果图为

CSS 弹性布局 flex 属性详解_第1张图片
image.png

你可能感兴趣的:(CSS 弹性布局 flex 属性详解)