关于flex布局部分语句

在使用flex布局中，使用常见的语句如下
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
display:flex;//指定一个盒子下的元素使用flex布局

flex-direction //这个属性有四个参数分别为
row|| row-reverse|| column || coulmn-reverse
//第一个row为默认值主轴方向为水平方向，起点在左端
//第二个row-reverse 他的方向也是水平方向，但是起点编程右端
//第三个column 它的作用是吧主轴方向变为垂直方向，起点在上沿
//第四个column它的作用也是把主轴方向换成垂直方向，起点在下沿

```javascript
// An highlighted block
flex-wrap: nowarp|warp |warp-reverse

第一个属性是默认值，即子元素不换行
第二个属性是换行，第一行在上方
第三个属性也是换行，不过与第二个的区别是第一行在下方

flex-flow属性是flex-direction和flex-wrap的属性简写，默认值为row nowrap；

justify-content这个属性定义在主轴上的对齐方式，他有一下属性下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
flex-start | flex-end | center | space-between | space-around;

第一个属性是默认值，左对齐‘
第二个属性是右对齐
第三个是居中，不止水平居中，在主轴是垂直方向是也可垂直居中
第四个是两端对齐，子元素之间的间隔都相等
第五个是每个项目两侧的间隔相等，所以项目建设的间隔比项目与边框的间隔大一倍

align-items与justify-content作用相似，alingn-items是作用于交叉轴上的对齐方式，其属性如下
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
flex-start//交叉轴的起点对齐，
flex-end//交叉轴的终点对齐
center//交叉轴的终点对齐
baseline//以项目的第一行文字的基线对齐（慎用）
stetch//默认值，如果项目未设置高度或设为auto，将沾满整个容器的高度

align-content 定义多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
在这里插入图片描述
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
align-content : flex-start || flex-end || center ||space-between ||space-around || stretch;

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block

  flex-basis: <length> | auto; /* default auto */

flex-shrink: 0;是在子元素里设置的，表示，如果空间不够，也不会压缩设置此属性的元素，一般图片用到比较多