1、flex彈性布局
flex的優(yōu)勢(shì)：簡(jiǎn)單、靈活 避免浮動(dòng)脫標(biāo)
面試題：什么叫彈性布局：彈性布局就是flex布局
1.1用法：給父元素(彈性容器)添加dispaly:flex
彈性容器特點(diǎn)：1、默認(rèn)寬度和父元素寬度一樣，默認(rèn)的高度由內(nèi)容撐開(kāi)
彈性盒子(親兒子)特點(diǎn)：1、默認(rèn)寬度由內(nèi)容撐開(kāi)，默認(rèn)的高度為父元素的高度(側(cè)軸方向默認(rèn)是拉伸)
2、沒(méi)有塊級(jí)，行內(nèi)，行內(nèi)塊元素之分，統(tǒng)統(tǒng)都是彈性盒子，都可以設(shè)置寬高
3、默認(rèn)不換行，寧愿犧牲自己的寬度
1.2主軸對(duì)齊方式 justify-content
主軸對(duì)齊方式屬性值
1.3側(cè)軸對(duì)齊方式align-items
側(cè)軸對(duì)齊屬性值：center
1.4控制某個(gè)彈性盒子在側(cè)軸的對(duì)齊方式（添加到彈性盒子） align-self
image.png
1.5伸縮比
含義： 伸縮比：flex給彈性盒子添加
1.所有的彈性盒子都添加相同的flex值，均分彈性容器的寬度；如果flex值不同，根據(jù)比例進(jìn)行分配
2.其他的盒子寬度固定，只有一個(gè)盒子設(shè)置了flex:1 --- 占據(jù)父元素剩余的寬度
總結(jié)：
彈性容器設(shè)置的屬性：df，jc，ai
彈性盒子設(shè)置的屬性：align-self，flex
彈性布局下只有浮動(dòng)不能配合使用，其他的都可以
案例：訂單確認(rèn)頁(yè)面
考察點(diǎn)：使用flex流式布局
效果圖
HTML布局
<body>
<!-- 用戶(hù)信息 -->
<div class="common info">
<!-- 地址圖標(biāo) -->
<i class="iconfont icon-location location"></i>
<!-- 用戶(hù)信息-地址 -->
<div class="detail">
<p><span class="name">林麗</span><span class="phone">18500667882</span></p>
<p class="line-clamp2">北京市 海淀區(qū) 中關(guān)村軟件園 信息科技大廈1號(hào)
樓410# 北京市 海淀區(qū) 中關(guān)村軟件園 信息科技大廈1號(hào)
樓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">康爾貝 非接觸式紅外體溫儀
領(lǐng)券立減30元 嬰兒級(jí)材質(zhì) 測(cè)溫…</p>
<i class="iconfont icon-x"></i>
<span>1</span>
</div>
<p class="tags">粉色 紅外體溫計(jì)</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>買(mǎi)家備注</p>
<p>希望可以盡快發(fā)貨，謝謝~</p>
</div>
<div>
<p>支付方式</p>
<p>支付寶 <i class="iconfont icon-more cardMore"></i> </p>
</div>
</div>
<!-- 卡片信息2 -->
<div class="common card">
<div>
<p>商品總價(jià)</p>
<p>￥299.00</p>
</div>
<div>
<p>運(yùn)費(fèi)</p>
<p>￥0.00</p>
</div>
<div>
<p>折扣</p>
<p class="discount">-￥30.00</p>
</div>
</div>
<!-- 底部支付 -->
<div class="pay">
<div class="payAdd">
合計(jì)：<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;
}
/* 用戶(hù)信息 */
.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;
}
~收獲滿(mǎn)滿(mǎn)！明天繼續(xù)加油丫
