flex布局（display：flex，写给父项）
不需要wrapper
是写给父项的，子项直接不区分块级元素等。
特点：必须要记住
不区分行内块，块级等元素，都可以设置宽高
默认高度和父项一致，宽度可设置，可用内容撑开
不会自动换行，只会压缩自己的宽度
除浮动无效外，margin、定位、位移都有效
<style>
div{
width: 500px;
height: 500px;
background-color: #ccc;
margin: 300px auto ;
display: flex;
}
span{
background-color: pink;
width: 100px;
transform: translateX(20px);
}
a{
color: red;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<a href="#">a标签</a>
<a href="#">a标签</a>
<a href="#">a标签</a>
<a href="#">a标签</a>
<span>2</span><span>3</span><span>4</span><span>5</span>
</div>
</body>
style{
justify-content:center
align-items:center
}
align-self（设置自己在盒子里的位置start，center，end）
子项设置（flex：1、2、3…………）
column+column-revers
Row.+ Row-revers
更换主轴方向（flex- direction）
换行（flex-wrap：wrap）
设置元素居中
flex- start flex-end center
侧轴对齐方式(align-items针对单行align- content针对多行)对应(justify-content)
space-evenly
space-around
space-between
center居中
flex-end从右开始
flex-Start从左开始
