HTML5——Flex布局

带着小黑猪环游世界 發表於 2021-9-15 07:06:00

介绍
　　将标签变为项目，利用主轴和侧轴进行的布局
 　　弹性布局菜鸟教程：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 class="cnblogs_code">
<pre> div {
display : flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}</pre>
</div>
 
 
　　小米商城 HTML5 
　　
<div class="cnblogs_code">
<pre><!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>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>MIUI</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>loT</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>云服务</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>天星科技</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>有品</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>小爱开放平台</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>企业团购</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>资质证照</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>协议规则</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>下载app</span>
 </a>
 <span>&nbsp;|&nbsp;</span>
 </li>
 <li>
 <a href="#">
 <span>智能生活</span>
 </a>
 <span>&nbsp;|&nbsp;</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">
 <spanstyle="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">
 <spanstyle="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">
 <spanstyle="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">
 <spanstyle="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">
 <spanstyle="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></pre>
</div>
 
CSS 
<div class="cnblogs_code">
<pre>* {
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;
}</pre>
</div>
 
 
        
来源：https://www.cnblogs.com/remix777/p/15270557.html

頁: [1]

琼殿技术论坛's Archiver

HTML5——Flex布局