介绍
将标签变为项目，利用主轴和侧轴进行的布局
弹性布局菜鸟教程：https://www.runoob.com/w3cnote/flex-grammar.html
特点
flex布局分为容器和项目。通过给父盒子添加属性让项目排列
弹性布局内项目不分块级元素和行内元素，都可设置大小，默认自适应（实际上项目占满侧轴，但是设置侧轴对齐时候会成为自适应。表现更像自适应）
（父容器）
display : 设置弹性布局
flex-direction :设置主轴方向
flex-wrap：设置子元素是否换行
justify-content ：设置主轴上的所有子元素排列方式
align-content：设置侧轴上的所有字元素排列方式，多行并且只能用于子项出现换行的情况（多行），在单行情况下没有效果
align-items：设置侧轴上的子元素排列方式（只适用单行）
（项目）
align-self ：调整单个项目在侧轴的位置
属性
flex布局分为主轴和侧轴：
默认主轴水平方向，侧轴垂直方向
display : flex 设置弹性布局
flex-direction：row 主轴水平方向
column 主轴垂直方向
flex-wrap：nowrap 默认值不换行
wrap 换行
align-items : flex-start 默认值，从侧轴头开始
center 居中
space-around 平分剩余空间
spance-between 两边贴边，剩下平方剩余空间
align-content : flex-start 从侧轴头开始
center 在侧轴居中对齐
space-around 平分剩余空间
spance-between 两边贴边，剩下平方剩余空间
align-self : flex-start 在侧轴头对齐
center 在侧轴居中对其
flex-end 在侧轴尾对齐
使用
div {
/* 父盒子应该设置宽高 */
display : flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
小米商城 HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/mi2.css" />
</head>
<body>
<div class="items">
<div class="items_container">
<ul class="items_container_ul1">
<li>
<a href="#">
<span>小米商城</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>MIUI</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>loT</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>云服务</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>天星科技</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>有品</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>小爱开放平台</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>企业团购</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>资质证照</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>协议规则</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>下载app</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>智能生活</span>
</a>
<span> | </span>
</li>
<li>
<a href="#">
<span>SelectLocation</span>
</a>
</li>
</ul>
<ul class="items_container_ul2">
<li>
<a href="#">
<span>登录</span>
</a>
</li>
<li>
<a href="#">
<span>注册</span>
</a>
</li>
<li>
<a href="#">
<span>消息通知</span>
</a>
</li>
<li class="container_ul2_lastli">
<a href="#">
购物车（0）
</a>
</li>
</ul>
</div>
</div>
<div class="goodsitem">
<img src="img/logo.png" class="logo"/>
<div class="goodsitem_container">
<ul class="goodsitem_container_ul">
<li>
<a href="#">
小米手机
</a>
</li>
<li>
<a href="#">
Redmi 红米
</a>
</li>
<li>
<a href="#">
电视
</a>
</li>
<li>
<a href="#">
笔记本
</a>
</li>
<li>
<a href="#">
平板
</a>
</li>
<li>
<a href="#">
家电
</a>
</li>
<li>
<a href="#">
路由器
</a>
</li>
<li>
<a href="#">
智能硬件
</a>
</li>
<li>
<a href="#">
服务
</a>
</li>
<li>
<a href="#">
社区
</a>
</li>
</ul>
<input id="searchtext" type="text" name="search" placeholder="小米手机" />
<div id="search_div">
<img id="search" src="img/search.png" />
</div>
</div>
</div>
<div class="banner">
<img class="banner_img" src="img/banner1.jpg" />
<ul>
<li>
<a href="#">
<span>手机</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>电视</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>笔记本 平板</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>家电</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>出行 穿戴</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>智能 路由器</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>电源 配件</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>健康 儿童</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>耳机 音箱</span>
<img src="img/right.png" />
</a>
</li>
<li>
<a href="#">
<span>生活 箱包</span>
<img src="img/right.png" />
</a>
</li>
</ul>
</div>
<div class="shower">
<ul class="shower_items">
<li>
<a href="#">
<img src="img/a.png" />
<span>保障服务</span>
</a>
</li>
<li>
<a href="#">
<img src="img/b.png" />
<span>企业团购</span>
</a>
</li>
<li>
<a href="#">
<img src="img/c.png" />
<span>F码通道</span>
</a>
</li>
<li>
<a href="#">
<img src="img/d.png" />
<span>米粉卡</span>
</a>
</li>
<li>
<a href="#">
<img src="img/e.png" />
<span>以旧换新</span>
</a>
</li>
<li>
<a href="#">
<img src="img/f.png" />
<span>话费充值</span>
</a>
</li>
</ul>
<img src="img/s1.jpg" class="showerimg" />
<img src="img/s2.jpg" class="showerimg" />
<img src="img/s3.png" class="showerimg" />
</div>
<div class="container">
<img class="adv" src="img/adv1.jpg" />
<div class="container_title">
<span class="firsttitle">手机</span>
<a href="#">
<span class="more">查看更多</span>
<img src="img/right%20arrow-b.png" />
</a>
</div>
<div class="goods">
<img src="img/goods1.jpg" />
<ul>
<li>
<a href="#">
<img class="goodsimg" src="img/g1.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
<li>
<a href="#">
<img class="goodsimg" src="img/g2.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
<li>
<a href="#">
<img class="goodsimg" src="img/g3.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
<li>
<a href="#">
<img class="goodsimg" src="img/g4.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
<li>
<a href="#">
<img class="goodsimg" src="img/g5.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
<li>
<a href="#">
<img class="goodsimg" src="img/g6.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
<li>
<a href="#">
<img class="goodsimg" src="img/g7.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
<li>
<a href="#">
<img class="goodsimg" src="img/g8.jpg" />
<span class="gname">Xiaomi MIX 4</span>
<span class="gdetail">CUP全面屏</span>
<span class="gprice">4999元起</span>
</a>
</li>
</ul>
</div>
<div class="container_title">
<span class="firsttitle">家电</span>
<a href="#">
<span class="more">热门</span>
<span class="more">电视影音</span>
</a>
</div>
<ul class="sortul">
<li>
<img class="sortul_img" src="img/a1.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a2.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a3.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a4.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a5.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<img class="sortul_img" src="img/a6.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a7.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a8.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a9.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li id="sortul_lastli">
<a class="a1" href="#">
<div class="a1_div">
<span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
<span class="gprice">7999元</span>
</div>
<img src="img/a10.webp" class="a1_img"/>
</a>
<a class="a2" href="#">
<div class="a2_div">
<span style="font-size: 16px; color: #000;">浏览更多</span>
<span style="color: #757575; font-size: 12px;">热门</span>
</div>
<img src="img/right2.png" class="a2_img" />
</a>
</li>
</ul>
<div class="container_title">
<span class="firsttitle">智能</span>
<a href="#">
<span class="more">热门</span>
<span class="more">安防</span>
<span class="more">出行</span>
</a>
</div>
<ul class="sortul">
<li>
<img class="sortul_img" src="img/a1.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a2.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a3.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a4.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a5.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<img class="sortul_img" src="img/a6.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a7.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a8.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a9.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li id="sortul_lastli">
<a class="a1" href="#">
<div class="a1_div">
<span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
<span class="gprice">7999元</span>
</div>
<img src="img/a10.webp" class="a1_img"/>
</a>
<a class="a2" href="#">
<div class="a2_div">
<span style="font-size: 16px; color: #000;">浏览更多</span>
<span style="color: #757575; font-size: 12px;">热门</span>
</div>
<img src="img/right2.png" class="a2_img" />
</a>
</li>
</ul>
<img src="img/goods2.jpg" />
<div class="container_title">
<span class="firsttitle">搭配</span>
<a href="#">
<span class="more">热门</span>
<span class="more">耳机音箱</span>
</a>
</div>
<ul class="sortul">
<li>
<img class="sortul_img" src="img/a1.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a2.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a3.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a4.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a5.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<img class="sortul_img" src="img/a6.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a7.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a8.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a9.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li id="sortul_lastli">
<a class="a1" href="#">
<div class="a1_div">
<span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
<span class="gprice">7999元</span>
</div>
<img src="img/a10.webp" class="a1_img"/>
</a>
<a class="a2" href="#">
<div class="a2_div">
<span style="font-size: 16px; color: #000;">浏览更多</span>
<span style="color: #757575; font-size: 12px;">热门</span>
</div>
<img src="img/right2.png" class="a2_img" />
</a>
</li>
</ul>
<div class="container_title">
<span class="firsttitle">配件</span>
<a href="#">
<span class="more">热门</span>
<span class="more">充电器</span>
</a>
</div>
<ul class="sortul">
<li>
<img class="sortul_img" src="img/a1.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a2.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a3.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a4.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a5.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<img class="sortul_img" src="img/a6.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a7.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a8.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a9.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li id="sortul_lastli">
<a class="a1" href="#">
<div class="a1_div">
<span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
<span class="gprice">7999元</span>
</div>
<img src="img/a10.webp" class="a1_img"/>
</a>
<a class="a2" href="#">
<div class="a2_div">
<span style="font-size: 16px; color: #000;">浏览更多</span>
<span style="color: #757575; font-size: 12px;">热门</span>
</div>
<img src="img/right2.png" class="a2_img" />
</a>
</li>
</ul>
<div class="container_title">
<span class="firsttitle">周边</span>
<a href="#">
<span class="more">热门</span>
<span class="more">出行</span>
</a>
</div>
<ul class="sortul">
<li>
<img class="sortul_img" src="img/a1.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a2.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a3.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a4.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a5.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<img class="sortul_img" src="img/a6.webp"/>
</li>
<li>
<a href="#">
<img class="simg" src="img/a7.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a8.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li>
<a href="#">
<img class="simg" src="img/a9.webp" />
<span class="gname">小米电视4A 70英寸</span>
<span class="gdetail">大屏更享受</span>
<span class="gprice">3299元</span>
</a>
</li>
<li id="sortul_lastli">
<a class="a1" href="#">
<div class="a1_div">
<span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
<span class="gprice">7999元</span>
</div>
<img src="img/a10.webp" class="a1_img"/>
</a>
<a class="a2" href="#">
<div class="a2_div">
<span style="font-size: 16px; color: #000;">浏览更多</span>
<span style="color: #757575; font-size: 12px;">热门</span>
</div>
<img src="img/right2.png" class="a2_img" />
</a>
</li>
</ul>
<img src="img/adv3.webp" class="adv"/>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
color: #b0b0b0;
}
ul {
list-style: none;
}
.items {
width: 100%;
height: 40px;
background-color: #000;
}
.items_container {
width: 1226px;
height: 40px;
margin: 0px auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.items .items_container .items_container_ul1 {
height: 40px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.items .items_container .items_container_ul1 li {
height: 40px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.items .items_container .items_container_ul1 li a {
font-size: 12px;
color: #b0b0b0;
}
.items .items_container .items_container_ul1 li a:hover {
color: #fff;
}
.items_container_ul2 {
height: 40px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.items_container_ul2 li {
height: 40px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin-right: 15px;
}
.items_container_ul2 li a {
font-size: 12px;
}
.items_container_ul2 li a:hover {
color: #fff;
}
.container_ul2_lastli {
width: 120px;
height: 40px;
background-color: #424242;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.goodsitem {
width: 1226px;
height: 100px;
margin: 0px auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.goodsitem .logo {
width: 56px;
height: 56px;
}
.goodsitem .goodsitem_container{
height: 100px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.goodsitem .goodsitem_container .goodsitem_container_ul {
height: 100px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.goodsitem_container_ul li {
height: 100px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin-right: 20px;
}
.goodsitem_container_ul li a {
color: #000;
}
.goodsitem_container_ul li a:hover {
color: #ff6700;
}
#searchtext {
width: 235px;
height: 50px;
padding-left: 10px;
border: 1px solid #e0e0e0;
}
#search_div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #e0e0e0;
}
#search {
width: 25px;
height: 25px;
margin-right: -2px;
}
.banner {
width: 1226px;
height: 460px;
background-color: lightblue;
margin: 0px auto;
position: relative;
}
.banner .banner_img {
width: 1226px;
height: 460px;
}
.banner ul {
width: 234px;
height: 440px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
background-color: rgba(105,101,101,.6);
position: absolute;
top: 0px;
left: 0px;
padding-top: 20px;
}
.banner ul li {
width: 234px;
height: 42px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.banner ul li a {
width: 214px;
height: 42px;
padding-left: 15px;
padding-right: 15px;
color: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.banner ul li a:hover {
background-color: #ff6700;
}
.banner ul li a img {
width: 16px;
height: 16px;
}
.shower {
width: 1226px;
height: 170px;
margin: 0px auto;
margin-top: 14px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 20px;
}
.shower_items {
width: 234px;
height: 170px;
background-color: #333333;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.shower_items li {
width: 76px;
height: 82px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.shower_items li a {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
font-size: 12px;
}
.shower_items li a:hover {
color: #fff;
}
.shower_items li a img {
width: 24px;
height: 24px;
margin-bottom: 5px;
}
.showerimg {
width: 316px;
height: 170px;
}
.container {
width: 100%;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.container .adv {
width: 1226px;
height: 120px;
margin: 20px auto;
}
.container .container_title {
width: 1226px;
height: 58px;
margin: 0px auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.container .container_title .firsttitle {
font-size: 24px;
font-weight: 300;
}
.container .container_title .more {
color: #000;
margin-right: 5px;
}
.container .container_title img {
width: 22px;
height: 22px;
}
.container .container_title a {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.goods {
width: 1226px;
height: 614px;
margin: 0px auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-bottom: 10px;
}
.goods ul {
margin-left: 10px;
height: 614px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.goods ul li {
width: 234px;
height: 300px;
background-color: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.goods ul li a {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
}
.goods ul li a img {
width: 160px;
height: 160px;
}
.gname {
color: #333;
margin-bottom: 3px;
}
.gdetail {
color: #b0b0b0;
font-size: 12px;
margin-bottom: 5px;
}
.gprice {
color: #ff6700;
}
.sortul {
width: 1226px;
height: 614px;
margin: 0px auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
margin-bottom: 20px;
}
.sortul li {
width: 234px;
height: 300px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: #fff;
justify-content: center;
align-items: center;
}
.sortul li a {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.sortul li a .simg {
width: 160px;
height: 160px;
}
#sortul_lastli {
width: 234px;
height: 300px;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
#sortul_lastli .a1 {
width: 234px;
height: 143px;
background-color: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
#sortul_lastli .a2 {
width: 234px;
height: 143px;
background-color: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.a2 .a2_div {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
margin-right: 40px;
}
.a1 .a1_div {
width: 94px;
height: 63px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.a1_img {
width: 80px;
height: 80px;
}
.a2_img {
width: 48px;
height: 48px;
}