[demo]flex布局的综合应用

CSS

 <style>*{padding: 0;margin: 0;}/* 设置body内的背景颜色 */body{background-color: #f5f5f5;}/* 设置最外层的容器的样式 */.wrap{width: 1000px;/* 设置居中 */margin: 0 auto;}/* 设置顶部的样式 *//* 注意最好把父元素也写上 */.wrap .top{height: 40px;background-image: linear-gradient(#f5f4f5,#e6e6e5);box-shadow: 0 2px 5px #aaa;margin-bottom: 30px;/* 设置父辈为flex容器 */display: flex;/* 把两个盒子左右两端对齐 用到的属性是justify-content */justify-content: space-between; /* 由于上边完全贴在一起了，原设计中两个盒子和top容器是有margin-top的距离的 用交叉轴对其方式的列对齐方式的center，让a标签居中*/align-items: center;}    /* 两个class类名写在一起中间要间隔空格，不然是没有效果的 */.wrap .top a{/* a标签上行内元素，所以是不能设置宽度，设置了也无效 */height: 30px;/* 让文字垂直居中 */line-height: 30px;border-radius: 5px;/* background-color: #ffaf0f; *//* 文字颜色设为白色 */color: #fff;/* 清除a标签的默认样式 */text-decoration: none;/* 设置文字和边框的距离为10px *//* padding:0 10px 上下为0 左右为10 */padding: 0 10px;}/* 由于a标签与父容器top的左右两边贴在一起了，用margin给10px间隔开，这里用结构类选择器分别设置左右margin值 */.wrap .top a:first-child{/* 设置背景颜色 */background-color: #ffaf0f;/* 设置左margin */margin-left: 10px;}.wrap .top a:last-child{background-color:#bbbbbb ;/* 设置右边盒子与盒子的间距 */margin-right: 10px;}/* 设置shoplist样式 */.wrap .shoplist{height: 620px;background-color: #ffffff;display: flex;/* 设置弹性布局换行 */flex-wrap: wrap;/* 一个盒子四周相同margin值 */justify-content: space-evenly;/* 设置多轴线对齐方式 */align-content: space-evenly;}/*写item部分的样式 */.wrap .shoplist .item{width: 230px;height: 280px;border: 1px solid #999;}/* 设置img的样式 */.wrap .shoplist .item img{/* img标签默认的样式会导致img下面会有一条白色的线，所以要把img这种inline-block行内块元素转成块元素 */display: block;width: 100%;}/* 设置p标签的样式 */.wrap .shoplist .item p{font-size: 12px;/* 设置文字超出部分就用三个点的省略号显示 *//* 先设置强制不能换行的属性write-space：nowrap*/white-space: nowrap;/* 再设置超出部分隐藏 */overflow: hidden;/* 最后设置设置超出部分三个点点点显示 */text-overflow: ellipsis;/* p标签属于行内元素，h4属于块级元素，行内元素和块级元素之间的距离可以用margin给值 */margin: 5px 0;}/* 设置h4标签的样式 */.wrap .shoplist .item h4{font-size: 16px;}</style>

HTML

<body><!-- flex容器div --><div class="wrap"><!-- flex容器里面两个div --><div class="top"><!-- 第一个容器下的盒子里面两个超链接 --><a href="#">管理收藏夹</a><a href="#">清空失效商品</a></div><div class="shoplist"><!-- 第二个容器下的盒子里面是4个小盒子 --><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div><div class="item"><img src="../img/shoplist/shop1.jpg" alt=""><p>戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</p><h4>￥ 19.90 </h4></div>        </div></div>
</body>

效果

[demo]flex布局的综合应用相关推荐

最简单的flex布局介绍（转自阮一峰）及筛子案例
大佬阮一峰在15年的博客至今我认为无人可以超越所以就直接引用他的博客 Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com) 在引用之后为一个flex布局小demo Fl ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
Flex布局教程（来源：阮一峰）
网页布局(layout)是 CSS 的一个重点应用.Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法.网友 JailBreak 为本文的所有示例制作了 ...
Flex 布局教程：实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
阮一峰：Flex 布局教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex ...
CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例注意:在下文中,将以parent指代父容器,item指代容器内的 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...

[demo]flex布局的综合应用

CSS

HTML

效果

[demo]flex布局的综合应用相关推荐

最新文章

热门文章