主轴：默认水平方向
侧轴：默认垂直方向
这两个轴的方向都是可变的，可通过flex-direction来变更，如果将主轴变为垂直方向，那么侧轴会自动变为水平方向
哪个父盒子需要自身的内容自动伸缩排布，就设置display:flex属性：
1、父盒子里面的盒子可以通过flex属性来指定划分父盒子的份数
子盒子可以不设宽高度，那么默认占父元素的全部高度和根据分数充满父元素的宽度（如果主轴方向是水平的，也就是父元素里面的元素水平排布，那么就算给子元素添加宽度也无效，因为他会按照分数充满整个父元素）
<div class="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.content {
width: 80%;
height: 400px;
border: 1px red solid;
margin: 30px auto;
display: flex;/*将该盒子设为伸缩布局*/
}
.item {/*子盒子不设高度，那么在这里默认占父元素的全部高度*/
background: pink;
float: left;
}
.item:nth-child(1){
flex: 1; /*占一份*/
}
.item:nth-child(2){
flex: 2; /*占一份*/
}
.item:nth-child(3){
flex: 3; /*占一份*/
}
如果父元素采取了百分比，那么为了防止盒子不被挤压的变形，我们可以给他们设置最大和最小宽度：min-width, max-width
image.png
默认情况下主轴是水平方向，设置主轴为垂直方向：flex-direction: column;
给父元素添加flex-direction：column后
image.png
2、上面我们在子盒子中用了flex属性设置了子盒子占据父盒子的份数，现在讲讲justify-content属性（）:调整主轴对齐
这个属性是给父盒子添加的,添加了这个属性就不要给子盒子添加flex属性了哦
justify-content:
取值：
flex-start：伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个项目在一行中最终点位置。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）
image.png
当justify-content:flex-start;
image.png
当justify-content:flex-end;
image.png
当justify-content:space-between;
image.png
当justify-content:space-around;
image.png
当justify-content:center;
image.png
3、侧轴对齐align-items:（因为当前的主轴方向是水平方向，所以现在侧轴方向是竖直方向）
这个属性是给父盒子添加的,添加了这个属性就不要给子盒子添加flex属性了哦
侧轴对齐。 align-items 属性定义项目在伸缩容器的当前行的侧轴（垂直于主轴）上的对齐方式。
align-items:
flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边。（侧轴的起点对齐。）
flex-end：伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边。（侧轴的终点对齐。）
center：伸缩项目的外边距盒在该行的侧轴上居中放置。（侧轴的中点对齐。）
stretch：默认值，伸缩项目拉伸填充整个容器。（如果项目未设置高度，将占满整个容器的高度。）
注意:以下测试给三个子元素设置了width: 150px;height: 200px;
image.png
当align-items: flex-start;
image.png
当align-items: flex-end;
image.png
当aling-items:center时
image.png
4、align-content属性（与align-items属性很相似）
align-content属性定义了多根轴线（即多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。
因为这个属性在多行情况下才生效，所以必须设置flex-wrap:wrap属性
align-content：
取值：
flex-start ：各行向伸缩容器的起点位置堆叠。
flex-end ：各行向伸缩容器的结束位置堆叠。
center ：各行向伸缩容器的中间位置堆叠。
space-between ：各行在伸缩容器中平均分布。
space-around ：各行在伸缩容器中平均分布，在两边各有一半的空间。
5、flex-wrap:是否换行
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，是否需要换行?
取值：
nowrap（默认）：不换行，强制一行显示，会收缩每个项的宽度（即使给每个项指定了宽度）。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方（较少使用）。
6、 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
比如有三个项目，想把最后一个项目放在最前面，这时候可以设置order:-1,想放在最后面可以设置order:1
网友评论