布局原理

其实就是弹性布局

可以把盒子指定成flex

display:flex

1.当父元素为flex时，子元素float,clear,vertical-alian属性失效

2.伸缩布局 = 弹性布局 = 伸缩盒布局 = flex布局

3.flex是给父盒子指定的，子元素自动变成父盒子的容器成员，子容器可以横向也可以纵向

总结

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

父级属性

flex-direction主轴方向

默认是水平向右

属性值	说明
row	默认值从左到右
row-reverse	从右到左
colunm	从上到下
colunm-reverse	从下到上

justify-content主轴子元素排列方式

属性值	说明
flex-start	默认值 从头部开始 如果主轴是X轴，则从左到右
flex-end	从尾部开始排列
center	水平居中
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间

很好理解，也很简单

要说的就是你的元素设置宽度后，如果空间不够，就会等比例压缩所有元素的宽度

flex-wrap

刚才上面提到了不换行压缩元素的问题，现在解决办法来了

两个属性

wrap，和nowrap (默认)

1.如果你的父盒子设置了高度，那么换行之后所有的行会平分你的高度

2.如果你的父盒子没有高度，那么换行之后，每行之间没有空隙

很简单没啥说的

align-items侧轴上的子元素排列方式（单行）

其实多行也是可以用的，效果就是把所有空间平均分配，然后每个单行在自己的空间里侧轴居中

当然用单行肯定效果好点了

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸(默认值)

太简单了，，没啥讲的

拉伸是干嘛的，呢，是在你的元素没有给高度的时候拉的和父元素一样高，给了高度就按高度来

align-content侧轴上的子元素排列方式（多行）

就是在出现换行的情况下侧轴的排列方式

单行无效

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow

它是flex-direction 和flex-wrap的复合属性

flex-flow:row wrap

很简单没啥讲的

子项目属性

flex

这个是什么意思呢

比如说一行里面有n个已经固定的盒子，他们有宽度和高度

然后剩下的空间，我们没有分配，可以加入盒子，随便加入几个，然后呢，我们在这些盒子加上flex属性，

剩下的空间就按他们flex的值，来按比例分配空间，高度按已经有的最高的元素来定

<template>
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  
</section>

</template>
<script>
export default {
  data() {
    return {
      msg:'woshinidebbnishiwodenana'
    };
  },
  setup() {},
};
</script>
<style>
section{
  width: 100%;
  display: flex;
  border: 1px red solid;

}
section div:nth-child(1){
  width: 100px;
  height: 50px;
  background-color: yellow;
}


section div:last-child{
  width: 100px;
  height: 100px;
  background-color: red;
}
section div:nth-child(2){
  flex: 1;
  background-color: saddlebrown;
}
section div:nth-child(3){
  flex: 2;
  background-color: salmon;
}

</style>

效果

你可以在你知道父盒子的具体尺寸后，对其进行比例分割

<template>
<section>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</section>

</template>
<script>
export default {
  data() {
    return {
      msg:'woshinidebbnishiwodenana'
    };
  },
  setup() {},
};
</script>
<style>
section{
  display: flex;
  width: 100%;
  height: 100px;
  background-color: white;
  border: 1px black solid;
}
div{
  flex: 1;
  background-color: blue;
  margin: 1px;

}
div:first-child{
  flex: 2;
}

</style>

效果

align-self控制子项自己在侧轴上的排列方式

很简单就是控制自己在侧轴上的排列方式呗，不影响其它的人

div:first-child{
  flex: 2;
  align-self: center;
}

order控制子项的先后顺序

div:nth-child(2){
  order: -1;
}

越小的在前面