浅谈flex布局

说到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,即如果空间不足,该项目将缩小。注意空间的大小。

 
原文地址:https://www.cnblogs.com/dy105525/p/7712087.html