<div id="app">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
<style>
#app{
width: 500px;
height: 500px;
background-color: cornsilk;
/* 使用flex布局 */
display: flex;
/* flex-direction 决定方向的 row表示以主轴为方向 row-reverse 表示以主轴反方向 column 以交叉轴为方向 column-reverse 以交叉轴反方向*/
flex-direction: row;
/* 超出宽度换行 nowrap 默认不换行子元素等比例缩放 wrap 超出换行 wrap-reverse 超出换行 方向反向*/
/* flex-wrap: wrap; */
/* flex-flow 是flex-direction 和 flex-wrap的合集 第一个值表示flex-directio的值 第二个值表示flex-wrap的值 */
/* flex-flow: column wrap; */
/* justify-content 表示主轴方向的排列方式 flex-start 以左侧为基准 flex-end 以右侧为基准 center中间为基准居中 space-between 左右靠齐 中间等距 space-evenly 间距等分 space-around 每个子元素的左右间距相等故 中间距离等于最左右两侧的2倍 */
justify-content: space-around;
/* align-conten 表示交叉轴的排列方式 值和作用同justify-centent */
align-content: flex-start;
/* align-items 表示交叉轴上的排列方式 flex-start 以上为基准线对齐 flex-end 以下为基准对齐 center 以自己的中轴线为准 垂直居中 stretch 如果子元素没有设置高度则交叉轴铺满，设置高度以高度为准 baseline 第一个子元素里面以文字为基准底部对齐*/
align-items: flex-start;
}
.item{
width: 100px;
height: 100px;
}
.item1{
background-color: blue;
/* orde 表示展示顺序 order数值越小越靠前*/
order: 2;
/* flex-grow 控制元素放大比列 可以设置任意非负数字（正小数，正整数， 0）当决定方向的的所有元素总和小于父级才会生效 如果大于元素综合大约1 则按比例分剩余空间 如果元素总和小于1 则按1为总量，根居比列划分 不会撑满*/
flex-grow: .2;
/* flex-shrink 控制元素缩小比列 可以设置任意非负数字（正小数，正整数， 0）当决定方向的的所有元素总和大于父级才会生效， 如果总和大于1 则按比例缩小， 如总和小于以也按比例缩小 但是还是会超出*/
flex-shrink: 2;
/* flex-basis 默认为auto 可以设置具体带单位的数值 优先级 maxwidth maxheight minwidth minheight > flex-basis > width > 内容本身的大小*/
flex-basis: auto;
/* flex 是flex-grow, flex-shrink 和 flex-basis 三个属性的合集*/
flex: 1 1 auto;
}
.item2{
background-color: darkgoldenrod;
order: 1;
flex-grow: .2;
}
.item3{
background-color: darkmagenta;
order: 3;
flex-grow: .2;
}
</style>
