flex布局一些常用属性

一、父盒子常设置的属性

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>

效果图：