什么是百分比布局/flex布局？

不悲不康
191 阅读6分钟

百分比布局

百分比布局， 也叫流式布局

效果： 宽度自适应，高度固定。

Flex布局/弹性布局：

1.是一种浏览器提倡的布局模型

2.布局网页更简单、灵活

3.避免浮动脱标的问题

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

父元素添加 display: flex，子元素可以自动的挤压或拉伸

修改主轴对齐方式属性: justify-content

Snipaste_2022-03-06_18-15-37.png

align-items（添加到弹性容器）

align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

Snipaste_2022-03-06_18-16-59.png

伸缩比: flex:值（整数）

注意 : 只占用父盒子剩余尺寸

主轴方向

flex-direction

思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？

l 答：水平方向。

l 思考：如何实现内容垂直排列？

主轴默认是水平方向, 侧轴默认是垂直方向

l 修改主轴方向属性: flex-direction

Snipaste_2022-03-06_18-20-34.png

弹性盒子换行

l 思考：默认情况下，多个弹性盒子如何显示？

l 弹性盒子换行显示 : flex-wrap: wrap;

l 调整行对齐方式 ：align-content

取值与justify-content基本相同

第三天今日案例：小兔鲜儿移动端布局

HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../base.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3214394_053aky4zt3jn.css">
    <link rel="stylesheet" href="./2.css">
</head>

<body>
    <div class="box">
        <div class="header">
            <span class="iconfont icon-arrow-left-bold"></span>
            <span>填写订单</span>
            <span></span>
        </div>
        <div class="conter">
            <span class="iconfont icon-map-filling"></span>
            <div class="text">
                <div>
                    <span>林丽</span>
                    <span>18500667882</span>
                </div>
                <p>北京市 海淀区 中关村软件园 信息科技大厦1号 楼410# </p>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>

        </div>
        <div class="conter2">
            <div class="pic">
                <img src="../04-小兔鲜-确认订单/xiaotuxian/uploads/pic.png" alt="">
            </div>
            <div class="jiage">
                <div class="title">
                    <p class="biaoti">康尔贝 非接触式红外体温仪 领券立减30元 婴儿级材质 康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温</p>
                    <span>x 1</span>
                </div>
                <div class="pink">
                    <span>粉色</span> <span>红外体温计</span>
                </div>
                <div class="qian">
                    <span><em>￥</em>266</span>
                    <span><em>￥</em>299</span>
                </div>
            </div>
        </div>
        <div class="conter2">
            <div class="pic">
                <img src="../04-小兔鲜-确认订单/xiaotuxian/uploads/pic.png" alt="">
            </div>
            <div class="jiage">
                <div class="title">
                    <p class="biaoti">康尔贝 非接触式红外体温仪 领券立减30元 婴儿级材质 康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温</p>
                    <span>x 1</span>
                </div>
                <div class="pink">
                    <span>粉色</span> <span>红外体温计</span>
                </div>
                <div class="qian">
                    <span><em>￥</em>266</span>
                    <span><em>￥</em>299</span>
                </div>
            </div>
        </div>
        <div class="conter2">
            <div class="pic">
                <img src="../04-小兔鲜-确认订单/xiaotuxian/uploads/pic.png" alt="">
            </div>
            <div class="jiage">
                <div class="title">
                    <p class="biaoti">康尔贝 非接触式红外体温仪 领券立减30元 婴儿级材质 康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温</p>
                    <span>x 1</span>
                </div>
                <div class="pink">
                    <span>粉色</span> <span>红外体温计</span>
                </div>
                <div class="qian">
                    <span><em>￥</em>266</span>
                    <span><em>￥</em>299</span>
                </div>
            </div>
        </div>
        <div class="conter2">
            <div class="pic">
                <img src="../04-小兔鲜-确认订单/xiaotuxian/uploads/pic.png" alt="">
            </div>
            <div class="jiage">
                <div class="title">
                    <p class="biaoti">康尔贝 非接触式红外体温仪 领券立减30元 婴儿级材质 康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温</p>
                    <span>x 1</span>
                </div>
                <div class="pink">
                    <span>粉色</span> <span>红外体温计</span>
                </div>
                <div class="qian">
                    <span><em>￥</em>266</span>
                    <span><em>￥</em>299</span>
                </div>
            </div>
        </div>
        <div class="conter2">
            <div class="pic">
                <img src="../04-小兔鲜-确认订单/xiaotuxian/uploads/pic.png" alt="">
            </div>
            <div class="jiage">
                <div class="title">
                    <p class="biaoti">康尔贝 非接触式红外体温仪 领券立减30元 婴儿级材质 康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温康尔贝
                        非接触式红外体温仪 领券立减30元 婴儿级材质 测温</p>
                    <span>x 1</span>
                </div>
                <div class="pink">
                    <span>粉色</span> <span>红外体温计</span>
                </div>
                <div class="qian">
                    <span><em>￥</em>266</span>
                    <span><em>￥</em>299</span>
                </div>
            </div>
        </div>
        <div class="conter3">
            <div class="peison">
                <p>配送方式</p>
                <p>顺丰快递</p>
            </div>
            <div class="beizhu">
                <p>买家备注</p>
                <p>希望可以尽快发货，谢谢</p>
            </div>
            <div class="peison">
                <p>支付方式</p>
                <p>支付宝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
        </div>
        <div class="conter4">
            <div class="peison">
                <p>商品总价</p>
                <p>￥299</p>
            </div>
            <div class="peison">
                <p>运费</p>
                <p>￥0.00</p>
            </div>
            <div class="peison">
                <p>折扣</p>
                <p class="zhekou">-￥30.00</p>
            </div>
        </div>
        <div class="bottom">
            <div class="heji">
                <span>合计:</span>
                <span><em>￥</em>266.00</span>
            </div>
            <a href="#">去支付</a>
        </div>
    </div>
</body>

</html>

CSS代码

html,
body {
    width: 100%;
    height: 100%;
    background-color: #e9e9e9;
}

.box {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 50px 10px 80px 10px;
}

.header {

    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    height: 50px;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    border-radius: 4px;
}

/* .header>span {
    align-items: center;
} */

.header>span:nth-child(1) {
    text-align: center;
    width: 40px;
    font-size: 18px;
}

.header>span:nth-child(2) {

    font-size: 18px;
}

.header>span:nth-child(3) {
    width: 40px;
}

.conter {
    height: 85px;
    margin: 5px 0;
    display: flex;
    border-radius: 4px;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 1px 5px #b1b1b1;
}

.conter>span:nth-child(1) {
    text-align: center;
    line-height: 30px;
    margin-left: 10px;
    font-size: 28px;
    width: 30px;
    height: 30px;
    color: rgb(34, 119, 91);
}

.conter .text {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.conter .text {
    display: flex;
}

.conter .text>div>span:nth-child(1) {
    font-size: 19px;
    margin-right: 20px;
    flex: 1;
}

.conter .text p {
    flex: 2;
    font-size: 14px;
}

.conter>span:last-child {
    text-align: center;
    line-height: 44px;
    font-size: 22px;
    width: 44px;
    height: 44px;
}

.conter2 {
    height: 110px;
    margin: 5px 0px;
    display: flex;
    border-radius: 4px;
    background-color: #fff;
    align-items: center;
    box-shadow: 1px 1px 5px #b1b1b1;
    padding: 0 10px;
}

.conter2 .jiage {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.conter2 .pic img {
    width: 85px;
    height: 85px;
}

.conter2 .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conter2 .biaoti {
    width: 192px;
    font-size: 15px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.conter2 .title span {
    margin-left: 20px;
    font-size: 20px;
}

.conter2 .pink {
    border-radius: 4px;
    font-size: 14px;
    width: 115px;
    height: 20px;
    background-color: #ebebeb;
    color: rgb(107, 107, 107);
}

.conter2 .pink>span:nth-child(1) {
    margin-right: 6px;
    margin-left: 3px;
}

.conter2 .qian {
    display: flex;
    width: 100px;
    justify-content: space-between;
    align-items: center;
}

.conter2 .qian>span {
    color: #cf4444;
    font-size: 20px;
}

.conter2 .qian>span>em {
    font-size: 14px;
}

.conter2 .qian>span:last-child {
    color: #999;
    font-size: 16px;
    text-decoration: line-through;
}

.conter3 {
    height: 130px;
    margin: 5px 0px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 1px 1px 5px #b1b1b1;
    padding: 0 10px;
}

.conter3 .peison,
.conter3 .beizhu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.conter3 .beizhu>p:last-child {
    font-size: 15px;
    color: #989898;
    margin-right: 90px;
}

.conter4 {
    height: 130px;
    margin: 5px 0px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 1px 1px 5px #b1b1b1;
    padding: 0 10px;
}

.conter4 .peison {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.conter4 .peison .zhekou {
    color: #cf4444;
}

.bottom {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 80px;
    display: flex;
    background-color: #fff;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
}

.bottom a {
    line-height: 35px;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    width: 90px;
    height: 35px;
    background-color: #54b196;
}

.bottom>.heji>span:last-child {
    font-weight: 700;
    font-size: 20px;
    color: #cf4444;
}

.bottom>.heji>span:last-child em {
    font-size: 14px;
}

效果呈现图

Snipaste_2022-03-06_20-06-33.png

avatar
文章
阅读
粉丝