标签：Flex flex items 布局 height width HTML5 wrap display
介绍
将标签变为项目，利用主轴和侧轴进行的布局
弹性布局菜鸟教程：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;
}
标签：Flex,flex,items,布局,height,width,HTML5,wrap,display 来源： https://www.cnblogs.com/remix777/p/15270557.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。