1、flex弹性布局
flex的优势：简单、灵活 避免浮动脱标
面试题：什么叫弹性布局：弹性布局就是flex布局
1.1用法：给父元素(弹性容器)添加dispaly:flex
弹性容器特点：1、默认宽度和父元素宽度一样，默认的高度由内容撑开
弹性盒子(亲儿子)特点：1、默认宽度由内容撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)
2、没有块级，行内，行内块元素之分，统统都是弹性盒子，都可以设置宽高
3、默认不换行，宁愿牺牲自己的宽度
1.2主轴对齐方式 justify-content
主轴对齐方式属性值
1.3侧轴对齐方式align-items
侧轴对齐属性值：center
1.4控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子） align-self
image.png
1.5伸缩比
含义： 伸缩比：flex给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
总结：
弹性容器设置的属性：df，jc，ai
弹性盒子设置的属性：align-self，flex
弹性布局下只有浮动不能配合使用，其他的都可以
案例：订单确认页面
考察点：使用flex流式布局
效果图
HTML布局
<body>
<!-- 用户信息 -->
<div class="common info">
<!-- 地址图标 -->
<i class="iconfont icon-location location"></i>
<!-- 用户信息-地址 -->
<div class="detail">
<p><span class="name">林丽</span><span class="phone">18500667882</span></p>
<p class="line-clamp2">北京市 海淀区 中关村软件园 信息科技大厦1号
楼410# 北京市 海淀区 中关村软件园 信息科技大厦1号
楼410# </p>
</div>
<!-- 更多按钮 -->
<i class="iconfont icon-more more"></i>
</div>
<!-- 商品信息 goods-->
<div class="common goods">
<img src="./uploads/pic.png" alt="">
<div>
<div class="title">
<p class="line-clamp2">康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温…</p>
<i class="iconfont icon-x"></i>
<span>1</span>
</div>
<p class="tags">粉色 红外体温计</p>
<div class="price">
<span><i>¥</i>266</span><del>¥299</del>
</div>
</div>
</div>
<!-- 卡片信息1 -->
<div class="common card">
<div>
<p>配送方式</p>
<p>顺丰快递</p>
</div>
<div class="message">
<p>买家备注</p>
<p>希望可以尽快发货，谢谢~</p>
</div>
<div>
<p>支付方式</p>
<p>支付宝 <i class="iconfont icon-more cardMore"></i> </p>
</div>
</div>
<!-- 卡片信息2 -->
<div class="common card">
<div>
<p>商品总价</p>
<p>￥299.00</p>
</div>
<div>
<p>运费</p>
<p>￥0.00</p>
</div>
<div>
<p>折扣</p>
<p class="discount">-￥30.00</p>
</div>
</div>
<!-- 底部支付 -->
<div class="pay">
<div class="payAdd">
合计：<span><em>￥</em>266.<i>00</i></span>
</div>
<a class="payBtn" href="#">去支付</a>
</div>
</body>
CSS
body {
background-color: #f7f7f8;
padding: 12px 11px 80px;
}
/* 卡片共同样式 */
.common {
background-color: #ffffff;
border-radius: 5px;
}
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 用户信息 */
.info {
display: flex;
align-items: center;
height: 85px;
}
.info .location {
width: 30px;
height: 30px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 50%;
color: #fff;
text-align: center;
font-size: 17px;
line-height: 30px;
margin-left: 11px;
margin-right: 11px;
}
.info .detail {
flex: 1;
}
.detail span.name{
font-size: 15px;
color: #262626;
margin-right: 24px;
}
.detail span.phone{
font-size: 13px;
}
.detail p:last-child {
font-size: 12px;
margin-top: 5px;
}
.info .more {
width: 44px;
height: 44px;
font-size: 12px;
text-align: center;
line-height: 44px;
}
.more i {
color: #808080;
}
/* 商品信息 */
.goods {
display: flex;
align-items: center;
height: 107px;
margin: 9px 0px 6px;
}
.goods img {
width: 85px;
height: 85px;
margin: 0px 14px 0px 11px;
}
.title {
display: flex;
align-items: center;
}
.title p {
width: 192px;
font-size: 13px;
color: #262626;
}
.title i {
font-size: 7px;
margin-left: 22px;
}
.title span {
color: #262626;
font-size: 15px;
margin-bottom: 4px;
}
.goods .tags {
width: 95px;
font-size: 11px;
color: #888888;
text-align: center;
background-color: #f7f7f8;
margin: 5px 0px 2px;
}
.price span {
color: #cf4444;
}
.price span i {
font-size: 9px;
}
.price del {
font-size: 9px;
color: #999999;
margin-left: 9px;
}
.card {
padding: 0 14px;
margin-bottom: 10px;
}
.card div{
display: flex;
align-items: center;
justify-content: space-between;
height: 42px;
font-size: 13px;
color: #262626;
}
.card .message {
justify-content: start;
}
.card .message p:last-child {
margin-left: 19px;
font-size: 12px;
color: #989898;
}
.cardMore {
font-size: 11px;
color: #808080;
}
.discount {
color: #cf4444;
}
/* 底部支付 */
.pay {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 79px;
padding: 0 11px 0px 9px;
background-color: #ffffff;
}
.pay .payAdd {
font-size: 11px;
color: #1e1e1e;
}
.payAdd span{
font-size: 20px;
color: #cf4444;
font-weight: 700;
}
.payAdd span em {
font-size: 11px;
font-weight: normal;
}
.payAdd span i {
font-size: 18px;
}
.pay .payBtn{
font-size: 13px;
color: #ffffff;
padding: 11px 24px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 3px;
}
~收获满满！明天继续加油丫
