元素属性
-
flex-grow
用于元素属性为 display: flex的子元素的，用于表示子元素在父元素剩余空间中所占有的比例，默认值为0，表示不占有剩余空间注意： 如果所有子元素没有设置宽度，设置了flex-grow值，那么整个 父元素就会按照flex-grow设置的属性来进行分配
它有三种属性可选
（1）number类型：表示子元素相对于其他子元素灵活扩展的量
（2）initial： 使用范围：所有css属性，作用：设置css属性为默认值
在js代码中也可以使用
（3）inherit：使用范围：所有css属性，作用：设置css属性从其父元素 继承值
如下代码
.wrap div {
height: 100%;
}
.left {
flex-grow: 1;
background-color: red;
}
.center {
flex-grow: 3;
background-color: blue;
}
.right {
flex-grow: 2;
background-color: green;
}
表现形式为
示例1
- flex-shrink
与flex-grow相似，表示页面视口缩放时，元素的缩放比例默认值为1，表示按照1：1的比例进行缩放，设置为0表示不缩放 - flex-basis
表现形式像设置width：300px，给内部的元素设置一个默认的宽度值
width和flow-basis的区别
（1）当都设置为0的时候，width表现为完全不显示，basis表现为元素宽度由内容撑开
（2）当都设置有值时，basis优先级更高
（4）当basis为auto时，如果设置了width，则由width决定，如果没有设置width则由内容撑开 - order属性
表示内部元素的排列顺序（默认从左到右） - flex属性
是flex-grow，flex-shrink，flex-basis三个的集合，可以设置成
默认为flex： 0 1 auto; - align-self属性，
控制单个元素的纵轴对齐方式，类似于容器属性的align-items属性和align-content属性，只不过align表示单行的纵轴对齐，align-content表示多行的纵轴对齐方式，而align-self表示单个元素的纵轴对齐方式
容器属性
- flex-direction 设置flex主轴方向
（1）row 从左到右（默认）
（2）column 从上到下
（3）row-reverse 从右到左
（4）column-reverse 从下到上 - flex-wrap
（1）nowrap 不折行（默认）
（2）wrap 折行
（3）wrap-reverse 反向折行
3.flex-flow：flex-direction+flex-wrap（row nowrap）默认
4.justify-content,主轴的对齐方式
（1）flex-start 主轴从开始方向对齐
（2）flex-end主轴从结束方向对齐
（3）space-between 表示两边对齐中间留空
（4）space-around 表示两侧元素中间都留空 - align-item 纵轴单行对齐方式
（1）flex-start，flex-end与justify-content相同
（2）center，表示中间对齐
（3）baseline 沿第一行文字的基线进行对齐
（4）stretch 默认值， 如果元素没有设置高度元素拉长占满纵轴 -
align-content 表示纵轴的多行对齐，值与align-items和align-self相同
（1）如果设置align-content为stretch的时候而align-items设置为flex-start或者给元素设置一个高度，表现为上下两行用间距隔开
image.png
（2）如果设置align-items为stretch而align-content为flex-start，第一个元素设置高度，那么第一行的所有元素会拉伸到第一个元素设置的高度而第二行元素保持不变
