说到flex布局,这是我们必须要学习的,因为这个会给我们很大的帮助,很多的时候不必要再用浮动布局了。
下面就来简单的说说吧---------------------------------
首先这个分两个属性,一个是容器的属性,另一个是容器子集的属性。
在容器上我们常用的有
justify-content(属性定义了项目在主轴上的对齐方式。): flex-start (子集居左)| flex-end(居右) | center (居中)| space-between (两端对齐,项目之间的间隔都相等。)| space-around(每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。);
}
align-items(属性定义项目在交叉轴上如何对齐): flex-start (起点对齐)| flex-end(终点对齐) | center(中点对齐) | baseline(项目的第一行文字的基线对齐) | stretch(默认值);
}
flex-flow(属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
):这个需要flex-direction和flex-warp的属性值的组合,这个要自己慢慢的组合就行了,需要什么功能就给其什么样的值。
在子集上比较常用的有
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。为2时,比1就要大一倍以此类推。
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。注意空间的大小。