flex布局<style> *{margin:0;padding:0;} .parent{ background:rg

<style>

*{margin: 0;padding: 0;}

.parent{

background: rgb(165, 165, 165);

height: 100vh;

display: flex;

** flex-direction和flex-wrap的缩写方式：flex-flow:<'flex-direction'> || <'flex-wrap'>

flex-direction: row;

**flex-direction 改变X轴的方向

**row ：默认属性从左到右

**row-reverse: 反转

**column:由水平方向变成垂直方向

**column-reverse:由水平方向变成垂直方向并进行反转

flex-wrap: wrap;

**flex-wrap 改变Y轴的方向

nowrap 默认值从上往下不会进行换行，会把宽度进行等比缩放

wrap 会根据宽度的变化进行换行

wrap-reverse 以Y进行反转

justify-content: space-between;

** justify-content(伸缩容器上) 控制伸缩项在Y的展现方式

** flex-start(默认值)

** flex-end 向着Y轴的中点方向，向右靠齐

** center 在中间显示

** space-between 把剩余的空间进行平均分布，第一个和最后一个都不分配

** space-around 把剩余的空间进行平均分布

align-items: center;

** align-items (伸缩容器) 控制伸缩项在Y轴在展现方式

** stretch(默认值) 在Y轴上拉伸了每一个子容器,拉伸到父级容器的高度，如果当前的子元素设置了高度就不会被拉伸

** flex-start 在Y轴的最顶部，以你容器的高度为标准

** flex-end 在Y轴的最底部，以你容器的高度为标准

** center 在Y轴的中间，以你容器的高度为标准，一般用来做垂直居中

align-content: stretch;

******* 该属性在伸缩行（列）只有一行（列）的时候不生效 *********

** align-content (伸缩容器) 同justify-content，但align-content是针对Y轴

** stretch(默认值)

** flex-start

** flex-end

** center

** space-between

** space-around

}

.parent .item{

width: 200px;

height: 200px;

background: rgb(114, 163, 255);

/* height: 200px; */

/* line-height: 200px; */

color: #fff;

text-align: center;

/* flex-grow,shrink,basis的缩写:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>] */

flex-grow: 1;

** flex-grow（伸缩项）控制伸缩项在伸缩行的伸展程度

** flex-grow:<integer> 取值是一个整数

flex-shrink: 1;

** flex-shrink 控制伸缩项在伸缩行的收缩程度

** flex-shrink:<integer> 取值是一个整数

flex-basis: 1;

***************设置了grow或shrink的伸缩项将以这个尺寸为基准进行伸缩**************************

** flex-basis 定义伸缩项伸缩前的尺寸

** flex-basis:auto | <length>

}

.parent .item:first-child{

/* order: 1; */

** order(伸缩项) 改变指定伸缩项的位置 order:<integer> 取值是一个整数，默认是0，这个数越大那么它的排列越靠后

background: greenyellow;

align-self: center;

** align-self (伸缩项)

** stretch(默认值)

** flex-start 在Y轴的最顶部，以你容器的高度为标准

** flex-end 在Y轴的最底部，以你容器的高度为标准

** center 在Y轴的中间，以你容器的高度为标准，一般用来做垂直居中

}

.parent .item:nth-child(2){

background: rgb(91, 255, 91);

/* order: 2; */

}

</div>