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

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布局

    
    

        
        
        
        

            
林丽18500667882
            
北京市 海淀区 中关村软件园 信息科技大厦1号
                楼410# 北京市 海淀区 中关村软件园 信息科技大厦1号
                楼410# 
        
        
        
    
    
    

        
        

            

                
康尔贝 非接触式红外体温仪
                    领券立减30元 婴儿级材质 测温…
                
                1
            
            
粉色 红外体温计
            

                ¥266¥299
            
        
    
    
    

        

            
配送方式
            
顺丰快递
        
        

            
买家备注
            
希望可以尽快发货，谢谢~
        
        

            
支付方式
            
支付宝  
        
    
    
    

        

            
商品总价
            
￥299.00
        
        

            
运费
            
￥0.00
        
        

            
折扣
            
-￥30.00
 
        
    
     
    
    

        

           合计：￥266.00
        
        去支付 
    

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

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