一、Flex布局

思考

多个盒子横向排列使用什么属性？
- 浮动
设置盒子间的间距使用什么属性？
- margin
需要注意什么问题？
- 浮动的盒子脱标

Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用)

是一种浏览器提倡的布局模型非常适合结构化的布局（左右、上下...）
布局网页更简单、灵活
避免浮动脱标的问题

一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本

1.1 Flex布局模型构成

作用

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

设置方式

父元素添加display:flex;子元素可以自动的挤压或拉伸（一行排列/水平排列）
水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列

组成部分

弹性容器（父元素）
弹性盒子（子元素）
主轴
侧轴/交叉轴

1.2 主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

思考：网页中，盒子之间有距离吗？
- 有

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

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

1.3 侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性：

align-items (添加到弹性容器)
align-self:控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着侧轴线被拉伸至铺满容器（子盒子没有高度的时候）

控制某个盒子在侧轴方向的对齐方式

1.4 Flex弹性盒子尺寸特点

2.1 伸缩比

使用flex属性修改弹性盒子伸缩比

属性

flex:值

取值分类

数值（整数）

注意：只占用父盒子剩余尺寸的份数

特点：可以根据父元素的尺寸发生变化

案例——小兔鲜儿确认订单页面

注意点：

如果设计图上的图标有这样的框框（如果图标没有也要注意），这是表示这个图标的触发范围是这一个框，一般是44px

关于为什么不设置img的宽高而设置其父元素的宽高

<!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>确认订单</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">
</head>

<body>
    <!-- 主体内容：滑动查看 -->

    <div class="main">
        <!-- 用户信息 -->
        <div class="user_msg pannel">
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <div class="user">
                <div class="top">
                    <h5>林丽</h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">
                    北京市 海淀区 中关村软件园 信息科技大厦1号
                    楼410#
                </div>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <!-- 用户信息 -->
        <!-- 商品 -->
        <div class="goods pannel">
            <div class="pic">
                <a href="#"><img src="./uploads/pic.png" alt=""></a>
            </div>
            <div class="info">
                <h5>康尔贝 非接触式红外体温仪
                    领券立减30元 婴儿级材质 测温…</h5>
                <p>
                    <span>粉色</span>
                    <span>红外体温计</span>
                </p>
                <div class="price">
                    <span class="red">￥<i>266</i></span>
                    <span>￥299</span>
                </div>
            </div>
            <div class="count">
                <i class="iconfont icon-x"></i>
                <span>1</span>
            </div>
        </div>
        <!-- 商品 -->

        <!-- 其他信息 -->
        <section class="rest pannel">
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5>买家备注</h5>
                <p>希望可以尽快发货，谢谢~</p>
            </div>
            <div>
                <h5>支付方式</h5>
                <p>支付宝<i class="iconfont icon-more"></i></p>
            </div>
        </section>
        <!-- 其他信息 -->

        <!-- 总价 -->
        <section class="total pannel">
            <div>
                <h5>商品总价</h5>
                <p><span>￥<i>299.00</i></span></p>
            </div>
            <div>
                <h5>运费</h5>
                <p><span>￥<i>0.00</i></span></p>
            </div>
            <div>
                <h5>折扣</h5>
                <p><i>-</i><span>￥<i>299.00</i></span></p>
            </div>
        </section>
        <!-- 总价 -->

    </div>
    <!-- 主体内容：滑动查看 -->

    <!-- 底部内容：固定定位 -->
    <div class="pay">
        <div class="left">
            <!-- 因为金额需要从数据库中获得，需要经常改变 所以单独用一个标签包裹 -->
            合计：<span class="red">￥<i>266.00</i></span>
        </div>
        <div class="right">
            <a href="#">去支付</a>
        </div>
    </div>
    <!-- 底部内容：固定定位 -->

</body>

</html>

body {
    background-color: #f7f7f8;
}

/* 公共样式 */
.red {
    color: #cf4444;
}

.pannel {
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}
/* 公共样式 */

/* 主体内容：滑动查看 */
.main {
    /* 因为底部的盒子固定定位 会脱标，会压住主体的内容，所以需要将主体内容距离底部盒子一段距离（底部盒子的高度） */
    padding: 12px 11px 80px;
}
/* 用户信息 */
.user_msg {
    display: flex;
    padding: 15px 0 14px 11px;
    align-items: center;
}

.user_msg .location {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.user_msg .user {
    flex: 1;
}

.user_msg .user .top {
    display: flex;
}

.user_msg .user .top h5 {
    width: 52px;
    font-size: 15px;
    font-weight: 400;
    color: #262626;
}

.user_msg .user .top p {
    font-size: 14px;
    color: #333333;
}
.user_msg .user .bottom {
    margin-top: 5px;
    font-size: 12px;
    color: #333;
}

.user_msg .more {
    width: 44px;
    height: 44px;
    /* ps */
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
}
/* 用户信息 */

/* 商品 */
.goods {
    display: flex;
    padding: 11px 0 11px 11px;
}
    /* 因为在base.css里面设置了图片width：100%等于父元素宽度的百分之百，所以这里可以直接给父元素设置宽高，图片的宽高也会变化 */
.goods .pic {
    width: 85px;
    height: 85px;
    margin-right: 12px;
}

.goods .info {
    flex: 1;
}

.goods .count {
    width: 44px;
    height: 44px;
    /* ps */
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
}

.info h5 {
    font-size: 13px;
    font-weight: 400;
    color: #262626;
}

.info p {
    width: 95px;
    height: 20px;
    margin: 5px 0;
    background-color: #f7f7f8;
    font-size: 12px;
    color: #888;
    border-radius: 2px;
}

.info p span:first-child {
    margin-right: 3px;
}

.info .price {
    font-size: 12px;
}

.info .price span:first-child i {
    font-size: 16px;
}

.info .price span:last-child {
    margin-left: 5px;
    color: #999;
    text-decoration: line-through;
} 
/* 商品 */

/* 其他信息 */

.rest {
    padding: 15px;
}

.rest div {
    display: flex;
    margin-bottom: 30px;
}

.rest div:last-child {
    margin-bottom: 0;
}

.rest div:last-child p i {
    font-size: 11px;
    color: #808080;
}

.rest div:nth-child(2n+1) {
    justify-content: space-between;
}

.rest div:nth-child(2) p {
    margin-left: 20px;
    font-size: 12px;
    color: #989898;
}

.rest h5,
.rest p {
    font-size: 13px;
    font-weight: 400;
    color: #262626;

}
/* 其他信息 */

/* 总价 */
.total {
    padding: 15px;
}

.total div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.total div:last-child {
    margin-bottom: 0;
}

.total h5,
.total p {
    font-size: 13px;
    font-weight: 400;
    color: #262626;
}

.total div:last-child p {
    color: #cf4444;
}
/* 总价 */
/* 主体内容：滑动查看 */

/* 底部内容：固定定位 */
.pay {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 设置了固定定位的盒子会脱标，就不能默认是占满父盒子的宽度 需要自己给设置宽度 */
    width: 100%;
    height: 80px;
    padding: 0 11px;
    /* ps */
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}

.pay .left {
    font-size: 12px;
    color: #1e1e1e;
}

.pay .left i {
    font-size: 20px;
}

.pay .right a {
    display: block;
    width: 90px;
    height: 35px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 3px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 35px;
}
/* 底部内容：固定定位 */

3.1 主轴方向

使用flex-direction改变元素排列方向

思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
- 水平方向
思考：如何实现内容垂直排列？（在弹性布局中，垂直排列）

主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性：flex-direction

属性值	作用
row	行，水平（默认）
column	* 列，垂直
row-reverse	行，从右向左
column-reverse	列，从下向上

4.1 弹性盒子换行

使用flex-wrap实现弹性盒子多行排列效果

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

设置了display:flex;所有弹性盒子一行显示，但是盒子的宽度不再是100px，因为是弹性布局，只要父级设置了display:flex;弹性盒子的尺寸都能随意伸缩

弹性盒子换行显示：flex-wrap: wrap; (给父级设置)

调整行对齐方式：align-content（父级）
- 取值与justify-content基本相同

案例——小兔鲜儿PC端

文字显示省略号

.orders .goods .txt h5 {
    text-overflow: ellipsis;
    /* 不换行 */
    white-space: nowrap;
    overflow: hidden;
}

<!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>小兔仙个人中心</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/center.css">
</head>

<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./login.html">请先登录</a>
                </li>
                <li>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i> 手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header clearfix">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">生鲜</a>
                    </li>
                    <li>
                        <a href="javascript:;">美食</a>
                    </li>
                    <li>
                        <a href="javascript:;">餐厨</a>
                    </li>
                    <li>
                        <a href="javascript:;">电器</a>
                    </li>
                    <li>
                        <a href="javascript:;">居家</a>
                    </li>
                    <li>
                        <a href="javascript:;">洗护</a>
                    </li>
                    <li>
                        <a href="javascript:;">孕婴</a>
                    </li>
                    <li>
                        <a href="javascript:;">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="javascript:;" class="xtx_search_cart sprites">
                    <i>2</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜">
                </div>
            </div>
        </div>
    </div>

    <!-- 内容：待完成 -->
    <div class="xtx_body">
        <div class="wrapper">
            <!-- 侧边栏 -->
            <div class="aside">1</div>
            <!-- 侧边栏 -->

            <!-- 主体内容 -->
            <div class="main">
                <!-- 用户账户概览 -->
                <div class="overview">
                    <div>
                        <a href="#">
                            <img src="./images/vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images/vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images/address.png" alt="">
                            <p>会员中心</p>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                    </div>
                </div>
                <!-- 用户账户概览 -->

                <!-- 订单 -->
                <div class="orders pannel">
                    <div class="pannel_title">
                        <h4>我的订单</h4>
                        <a href="#">查看全部></a>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
                                    </div>
                                    <div class="txt">
                                        <h5>拉夫劳伦t恤男正品圆领短袖...</h5>
                                        <p>颜色：白色 尺码：M 数量：1</p>
                                    </div>
                                </div>
                                <div class="status">待付款</div>
                                <div class="pay common">
                                    <p>￥99.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">立即付款</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>
                            </li>
                            <li>2</li>

                        </ul>
                    </div>
                </div>
                <!-- 订单 -->
            </div>
            <!-- 主体内容 -->
        </div>
    </div>
    <!-- 内容 -->


    <!-- 公共底部 -->
    <div class="xtx_footer">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

.xtx_body {
    padding: 30px 0 85px;
    background-color: #f6f6f6;
}

.xtx_body .wrapper {
    display: flex;
}

/* 侧边栏 */
.aside {
    width: 227px;
    min-height: 500px;
    margin-right: 18px;
    /* ps */
    background-color: pink;
}
/* 侧边栏 */

/* 主体内容 */
.xtx_body .main {
    flex: 1;
    min-height: 500px;
    /* ps */
    /* background-color: skyblue; */
}

/* 账户信息概览 */
 .overview {
    display: flex;
    height: 132px;
    padding: 20px 0;
    margin-bottom: 18px;
    background-color: #fff;
}

.overview div {
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    text-align: center;
}

.overview div img {
    width: 25px;
    margin-bottom: 10px;
}

.overview div a:last-child img {
    width: 18px;
}

.overview div span {
    font-size: 25px;
    color: #e05e30;
}

.overview div p {
    font-size: 16px;
}

.overview div:first-child {
    border-right: 1px solid #f4f4f4;
}
/* 账户信息概览 */

/* 公共样式 */
.pannel {
    padding: 20px 30px;
    margin-bottom: 20px;
    background-color: #fff;
}

.orders .pannel_title {
    display: flex;
    justify-content: space-between;
    height: 45px;
    border-bottom: 1px solid #f4f4f4;
}

.orders .pannel_title h4 {
    font-size: 22px;
    font-weight: 400;
    color: #333;
}

.orders .pannel_title a {
    margin-top: 8px;
    font-size: 16px;
    color: #999;
}

.orders .content {
    margin-top: -1px;
}

.orders .content li {
    display: flex;
    height: 137px;
    margin-bottom: 21px;
    border: 1px solid #f4f4f4;
}

.orders .content li:last-child {
    margin-bottom: 0;
}

.orders .content .goods {
    display: flex;
    flex: 1;
    margin-right: 120px;
    padding: 17px 0 14px 12px;
    align-items: center;
}

.orders .goods .pic {
    width: 107px;
    height: 107px;
    
}

.orders .goods .txt {
    flex: 1;
    /* 溢出的时候显示省略号 */
    /* 因为弹性盒子的尺寸可以被内容撑开，不换行的文字可以撑开这个盒子的尺寸 */
    /* 也可以是这行文字加上省略号的宽度 */
    width: 0;
}

.orders .goods .txt h5 {
    text-overflow: ellipsis;
    /* 不换行 */
    white-space: nowrap;
    overflow: hidden;
}

.orders .content .status {
    width: 120px;
    margin-top: 50px;
    font-size: 14px;
    color: #e05e30;
}

.orders .content .pay {
    width: 200px;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}

.orders .content .pay p:first-child {
    font-size: 14px;
    color: #9a2e1f;
}

.orders .content .action {
    width: 180px;
}

.orders .content .action a:first-child {
    width: 100px;
    height: 30px;
    margin-bottom: 8px;
    background-color: #5eb69c;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    text-align: center;
}

.orders .content .common {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* 公共样式 */
/* 主体内容 */