display: flex; （设置成flex布局之后，子元素float就失效了，定位仍然可用。）
设置主轴方向：默认，不换行，主轴方向从左到右。
从右到左的顺序：flex-direction: row; 颠倒顺序：flex-direction: row-reverse;
主轴方向从上到下：变换了主轴，flex-direction: column; 颠倒：flex-direction: column-reverse;
flex布局默认不换行：默认情况下，项目都排在一条线（又称"轴线"）上flex-wrap: nowrap; 换行：flex-wrap: wrap; 上下行颠倒：flex-wrap: wrap-reverse; 复合属性 设置主轴方向和是否换行的：flex-flow:row wrap;flex-direction: column;
定义了项目在主轴上的对齐方式（应为你的主轴是水平方向的 ）左对齐；justify-content: flex-start; 右对齐；justify-content: flex-end;justify-content: center 表示水平方向居中。
flex布局不像绝对定位，脱离文档流，flex布局设置了还是会遵守文档流布局。
justify-content: space-between;子元素靠边对齐 两端对齐，项目之间的间隔都相等。 justify-content: space-around; 子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
justify-content: space-evenly; 子元素相邻的距离保持一致。
定义项目在交叉轴上对齐方式：垂直方向居中；align-items: center;垂直方向的顶部 交叉轴的起点对齐；align-items:flex-start; 垂直方向的底部 交叉轴的终点对齐；align-items: flex-end; align-items: baseline;（ baseline: 项目的第一行文字的基线对齐） align-items: stretch;stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content：多列交叉轴方向的布局；把多列的item在整体的垂直方向上设置位置 使用align-content
align-items：如果是当个item控制他的垂直方向我们使用align-items
flex-start在交叉轴的起始 flex-end 在交叉轴的末尾
center： 在交叉轴的中间；space-between： 在交叉轴的两端；space-around： 空白环绕 两个项目之间的距离大一倍；stretch： 是默认值flex-shrink的默认值是1，要想设置首先不能设置item的高度。
order： 定义项目的排列顺序。数值越小，排列越靠前，默认为0（单个的item 控制他的在交叉轴上面的方向，交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性）。
flex复合属性：flex布局item的基本宽度，设置了flex-basis width就不管用了 同时存在的时候，优先使用flex-basis，如果父元素的宽度太小了，item排列不下 设置的flex-basis的宽度会自动缩小，直到占满父元素。
flex-grow: 1;放大item 均匀占满父元素（0代表不放大 1 就代表放大）
例：
<style>
.box{
margin:30px auto;
border:1px solid #ccc;
padding:10px;
display: flex;
justify-content: space-between;
width: 600px;
}
.img-sty img{
width: 120px;
height: 120px;
display: block;
}
.dec{
line-height: 30px;
width: 350px;
}
.btn-list{
display: flex;
align-items: center;
}
.btn1,.btn2{
width: 70px;
height: 40px;
background-color: crimson;
color:#fff;
line-height: 40px;
text-align: center;
margin-right: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
./s8.jpg"alt="">
</div>
【6期免息】OPPO R15 6GB+128GB全面屏双摄拍照手机星空紫全网通移动联通电信4G双卡双待手机 AL智能拍照，让美更自然
</div>
确认</div>
取消</div>
</div>
</div>
</body>
效果图：
