目录
一、父盒子常设置的属性
1.设置display:flex
2.设置主轴flex-direction
flex-direction:row(主轴为x轴，从左向右)-不设置时默认的格式
flex-direction:row-reverse(主轴为x轴，从右向左，此时首页已经从最左边，变到最右边了，相对于第一种来说逆序)
flex-direction:column(主轴为y轴，从上向下)
flex-direction:column-reverse(主轴为y轴，从下向上)
3.设置主轴内元素的排列格式：justify-content
justify-content:flex-start(靠左，之间没有间距)-不设置时默认的格式
justify-content:flex-end(靠右，之间没有间距)
ps:注意区分该项与flex-direction:row-reverse的区别， justify-content:flex-end保持了首页、分类、购物车、我的这样一个顺序，而flex-direction:row-reverse的顺序完全是反的。
justify-content:center(居中，之间没有间距)
justify-content:space-around (平分该行的间距)
justify-content:space-between (先两边贴边再平分剩余空间)
4.元素在一行上摆不开flex-wrap
flex-wrap:nowrap;不设置时，默认子元素不换行，增加元素，会缩小每个元素的大小，将新元素塞到一行里
flex-wrap:wrap;放不下就换行
5.设置侧轴元素的排列方式（适合单行元素的情况）—设置盒子在水平居中，并且侧轴居中；align-items
align-items:center;设置侧轴居中；主侧轴同时居中效果如下
align-items:stretch;子元素不设置高度时，沿着侧轴拉伸
这里学到了一个效果：比如将页面分为上下两个部分，上面固定高度，下面部分延伸剩余高度
这里附上一个链接https://blog.csdn.net/milijiangjun/article/details/108221092
6.设置侧轴上子元素的排列方式（多行）align-content
align-content:center;
align-content:space-between;（两边会贴着侧轴的上下沿）
7.flex-direction与flex-wrap可以用一个属性同时表示flex-flow flex-flow:column wrap
二、子项常见属性
flex项目占的份数：flex,从剩余空间里分布，数字表示占多少份
flex:1;剩余空间都占了;
父盒子width:400px;首页和购物车宽度各占100px,中间占剩余200px
设置盒子里的元素平均分配：
子元素没设置宽度的时候
<template>
<div>
<div class="tabar">
<div class="tabar-item">1</div>
<div class="tabar-item">2</div>
<div class="tabar-item">3</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.tabar{
width:600px;
height:400px;
display:flex;
flex-flow: row wrap;
}
.tabar .tabar-item{
flex:1;
background-color: aqua;
}
</style>
效果图：
平分的基础上，某个盒子想多占几分
eg:平分的基础上，第二个盒子想占两份
<style>
.tabar{
width:600px;
height:400px;
display:flex;
flex-flow: row wrap;
}
.tabar div{
flex:1;
background-color: aqua;
}
.tabar div:nth-child(2){
flex:2;
background-color:brown;
}
</style>
效果图：
控制子项自己在侧轴的排列方式align-self
允许多个子盒子里面的某一个与其他盒子的对齐方式不一样
只有第二个盒子在侧轴方向是flex-end
<style>
.tabar{
width:600px;
height:400px;
display:flex;
flex-flow: row wrap;
}
.tabar div{
flex:1;
background-color: aqua;
}
.tabar div:nth-child(2){
flex:2;
align-self: flex-end;
background-color:brown;
}
</style>
效果图：
改变盒子之间的排列顺序order
不改变div之间的代码结构顺序，只通过css来改变；最前面的order:0,之后依次1，2，3；越小越靠前
eg：设置第二个盒子在最前面，改变第二个盒子里的order;设置到最前面要比0小；故order:-1
<style>
.tabar{
width:600px;
height:400px;
display:flex;
flex-flow: row wrap;
}
.tabar div{
flex:1;
background-color: aqua;
}
.tabar div:nth-child(2){
flex:2;
align-self: flex-end;
order:-1;
background-color:brown;
}
</style>
效果图：