flex布局详解（带你玩转flex布局）
许多⼈都对flex布局感到头疼，在主轴交叉轴上变来变去，每次使⽤的时候记不住，只能⼀个个去试试，看看能够出现什么效果，试出来符合⾃⼰的要求了，那就万事⼤吉，跳过下⼀个，之后再⽤的时候⼜去试⼀遍，这样效率就⼗分的低下了。
⼀、什么是主轴和交叉轴？
这个概念是必须理解的，能否畅快的玩转flex布局，重点就是这两个轴了，理解这个万事⼤吉。主轴和交叉轴在默认情况下，可以看做是⼀个第四象限的坐标轴，在坐标轴⾥的x轴就是我们的主轴，y轴就是我们的交叉轴。项⽬主轴上排列，排满后在交叉轴⽅向换⾏。交叉轴垂直于主轴，它的⽅向取决于主轴⽅向。
可以参考下图，当第⼀⾏满了以后，item4就被排到了交叉轴第⼆⾏，如果主轴的⽅向发⽣了改变，交叉轴的⽅向也会随之变化。
⼆、flex的属性介绍
flex布局的属性有很多，⼀般我们将这些属性归为两⼤类，⼀类是设置容器本⾝的，容器也就是你想使⽤flex布局的标签，通俗的将就是在css⾥声明了display: flex，⼀类是设置容器⾥⾯的项⽬的，项⽬就是被你容器标签所包裹的所有⼦元素。
(⼀)容器属性
1、flex-direction 属性
row（默认值）：主轴横向，⽅向为从左指向右。项⽬沿主轴排列，从左到右排列。
row-reverse：row的反⽅向。主轴横向，⽅向为从右指向左。项⽬沿主轴排列，从右到左排列。
column：主轴纵向，⽅向从上指向下。项⽬沿主轴排列，从上到下排列。
column-reverse：column的反⽅向。主轴纵向，⽅向从下指向上。项⽬沿主轴排列，从下到上排列。
2、flex-wrap 属性
设置是否允许项⽬多⾏排列，以及多⾏排列时换⾏的⽅向。（意思是⼀⾏排满了，是否需要换⾏，不换⾏的话，就会溢出容器，需要注意的是，这⾥的⾏不是我们单纯的横着⼀⾏⾏看下来，⽽是沿主轴⽅向看做⼀⾏）
nowrap（默认值）：不换⾏。如果单⾏内容过多，则溢出容器。
wrap：容器单⾏容不下所有项⽬时，换⾏排列。
wrap-reverse：容器单⾏容不下所有项⽬时，换⾏排列。换⾏⽅向为wrap时的反⽅向。
按照上⾯设置排列⽅向为column-reverse来举个例⼦吧。
1、未设置换⾏，沿主轴⽅向的项⽬就溢出了容器
2、设置了换⾏，沿主轴⽅向来换⾏flex布局对齐方式
3、justify-content 属性
设置项⽬在主轴⽅向上对齐⽅式，以及分配项⽬之间及其周围多余的空间。（还是以排列⽅向为column-reverse为例）
flex-start（默认值）：项⽬对齐主轴起点，项⽬间不留空隙。
center：项⽬在主轴上居中排列，项⽬间不留空隙。主轴上第⼀个项⽬离主轴起点距离等于最后⼀个项⽬离主轴终点距离。
flex-end：项⽬对齐主轴终点，项⽬间不留空隙。
space-between：项⽬间间距相等，第⼀个项⽬离主轴起点和最后⼀个项⽬离主轴终点距离为0。
space-around：与space-between相似。不同点为，第⼀个项⽬离主轴起点和最后⼀个项⽬离主轴终点距离为中间项⽬间间距的⼀半。
space-evenly：项⽬间间距、第⼀个项⽬离主轴起点和最后⼀个项⽬离主轴终点距离等于项⽬间间距。
4、align-items 属性
设置项⽬在⾏中的对齐⽅式。（以排列⽅向为column-reverse为例，关键在于理解⼀⾏是什么样的概念）
stretch（默认值）：项⽬拉伸⾄填满⾏⾼。
1、上⾯的属性测试图，我都给item设置了宽度和⾼度，接下来我将把宽度给去掉，体验下这个项⽬拉伸⾄⾏⾼的时候，到底是怎么⼀回事。可以观察到item的宽度被拉伸到了填满整个容器的宽度，这就说明如果只有⼀⾏item的时候，它的⾏⾼占据了整个容器。如果是两⾏的话，每⾏各占百分之50，以此类推。
flex-start：项⽬顶部与⾏起点对齐。（这时候项⽬不会被拉伸去填满⾏⾼）
center：项⽬在⾏中居中对齐。
flex-end：项⽬底部与⾏终点对齐。
baseline：项⽬的第⼀⾏⽂字的基线对齐。（由于这个属性⽐较特殊，我将通过排列⽅向为row的进⾏展⽰，这⾥设置了item的⾏⾼line-height属性，最后⼀个item的⾏⾼和前⾯两个不⼀样，这时候可以发现他们⽂字的基线是对齐的，附上css代码助于理解）
.item {
border: 2px solid red;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.special {
line-height: 75px;
}
5、align-content 属性
多⾏排列时，设置⾏在交叉轴⽅向上的对齐⽅式，以及分配⾏之间及其周围多余的空间。（以排列⽅向为column-reverse为例）这个都不想做图了。。。就是把主轴⽅向上的换成在交叉轴⽅向上的，为了表达清楚，
stretch（默认值）：当未设置项⽬尺⼨，将各⾏中的项⽬拉伸⾄填满交叉轴。当设置了项⽬尺⼨，项⽬尺⼨不变，项⽬⾏拉伸⾄填满交叉轴。
flex-start：⾸⾏在交叉轴起点开始排列，⾏间不留间距。
center：⾏在交叉轴中点排列，⾏间不留间距，⾸⾏离交叉轴起点和尾⾏离交叉轴终点距离相等。
flex-end：尾⾏在交叉轴终点开始排列，⾏间不留间距。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。