我们在容器的属性，上一章就已经有所总结，通过主轴和交叉轴的配合使用，我们可以完全满足项目的布局对齐方式。（注意：我们首先的是要确定我们的主轴方向和容器的元素），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布局。具体的项目的时候，我们要记住主轴的方向和具体的标签容器。
网友评论