<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue动态切换样式</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
.flex{
width: 350px;
height: 500px;
background: rgba(0,0,0,0.3);
display: flex;
/* 容器的属性 */
/* flex-direction:row,row-reverse,column,column-reverse */
flex-direction: row;
/* flex-wrap:wrap,no-wrap,wrap-reverse */
flex-wrap: wrap;
/* flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap， */
/* justify-content:flex-start,flex-end,center.space-between,space-around,space-evenly*/
justify-content: space-between;
/* align-item:flex-start,flex-end,center,baseline,stretch,其中flex-start和strtch效果一样；flex-end和baseline效果一样 */
align-items: center;
/* align-content:flex-start | flex-end | center | space-between | space-around | space-evenly | */
/* align-content:center; */
}
.flex1{
width: 100px;
height: 100px;
background: blue;
/* 项目item的属性： */
/* order取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。 */
/* order:1; */
/*
flex-grow:默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大
假如项目1的值a，项目2的值为b，其他的项目为0，那么项目1所占据的空间为剩余所有空间的a/(a+b)
*/
/* flex-grow:1; */
/* flex-shrink:
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
*/
/* flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。
先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准
*/
/*
flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有三个快捷键值，分别是
auto(1 1 auto) 等分放大缩小；
none(0 0 auto)不放大，但等分缩小
1 (1 1 0) 等分
*/
/*
align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
*/
}
.flex2{
width: 80px;
height: 120px;
background: green;
}
.flex3{
width: 120px;
height: 80px;
background: red;
}
.flex4{
width: 90px;
height: 80px;
background: yellow;
}
.flex5{
width: 90px;
height: 80px;
background: black;
}
</style>
</head>
<body>
<div id="app">
<div class="flex">
<div class="flex1"></div>
<div class="flex2"></div>
<div class="flex3"></div>
<div class="flex4"></div>
<div class="flex5"></div>
</div>
<div class="demo" style="display: flex;">
<div class="demo1" style="flex:1;background:red">第一</div>
<div class="demo2" style="flex:1;background:green">第二</div>
<div class="demo3" style="flex:1;background:yellow">第三</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
</body>
</html>
