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;
}

~_{收获满满！明天继续加油丫}

移动web第三天-移动端特点flex布局