移动端---flex布局--项目

     我们在容器的属性,上一章就已经有所总结,通过主轴和交叉轴的配合使用,我们可以完全满足项目的布局对齐方式。(注意:我们首先的是要确定我们的主轴方向和容器的元素),flex布局还有一个重要的属性是分配空间的。分配空间是,我们首先要对项目的布局和占位以及UI的美观来确定关键属性。分配空间是项目的必须要关注的,UI给我们的是标准的尺寸,我们要把具体的尺寸转化为具体的比例。分配空间就是按照比例开进行分配。每个项目的比例是按照空间比例来进行的,在缩放和不同的屏幕的尺寸情况下,我们要保证项目的布局不失真,就要按照比例进行设置。我们需要项目的属性来进行设置。

1:order:定义项目的排列顺序。数值越小,排列在前面。order的值是按照数值的大小进行排列。数值越小,排列在最前面。

2:flex-grow:定义的是项目的放大比例。也是各个项目的分割比例。把剩余的空间进行划成份数,进行把单行的剩下的空间进行分成份数来进行按比例分配。我们就可以通过不同的份数进行按照比例进行排列。如果,一个项目的flex-grow的属性为2,其它项目的都是为1的话,占的空间是其它项目的2倍。这是空间充足的时候,我们要设置的项目的属性。flex-grow的项目属性。

3:flex-shrink:定义了项目的缩小比例。默认为1:缩小的时候,我们是空间不足的时候,我们才用到缩小的属性。flex-shrink。如果,不是主要的展示数据的模块的话,我们一般来讲,放大比例和缩小比例是一样的。为了更加的美观。

4:flex-basis:是我们的项目占主轴的空间的。默认值的空间,和width,height属性一样,将会固定下来。我们在这里可以简写,flex: 1 1 100px; 第一个值是flex-grow 第二个值是:flex-shrink;第三个值 是flez-basis;

5:align-self:通过字面的意思,我们就可以知道,是项目自己设置的属性,是设置自己项目和其他项目不一样的对齐方式,继承了父集容器的align-items的属性,如果,没有父元素,则等同于stretch.

该属性也有align-items的属性,对齐方式的属性。(除了auto以外),属性和align-items一致。

我们可以通过在缩放,放大的情况下,可以在项目上,设置项目的属性,有align-shrink=0;这样,在图片的空间,我们可以通过放大的缩小来进行排版布局。

在我们移动端的布局时候,我们可以在大的模块中,使用flex布局,主轴和交叉轴的方向进行排版,通过容器的属性和项目的属性来进行具体的设置。如果,我们需要给具体的项目来进行具体的宽度和高度,我们可以用rem来进行布局,这样,保证我们的页面的设计和尺寸不失真,在放大和缩小的情况下,我们可以保持不失真的状态。在导航,下拉菜单,我们一般就是用flex布局。具体的项目的时候,我们要记住主轴的方向和具体的标签容器。

推荐阅读更多精彩内容