flex布局完整示例

先看图；完美的效果

最后，我们直接上代码：

@{Layout = null;
}<!DOCTYPE html><html>
<head><meta name="viewport" content="width=device-width" /><title>FlexMusic-XianDao</title><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>html,body {height: 100%;background-color: #ccc;}body {display: flex;flex-direction: column;background-color: #fff;margin: 0;font-family: Lato, sans-serif;color: #222;font-size: 0.9em;}main {/*他是flex-grow  和 flex-shrink 和 flex-basis 属性的一个简写;解释：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis 这个东东有点绕，后面慢慢讲；*/display: flex;flex: 1 0 auto; /*Is a flex item弹性盒子模型之间可以可以互相嵌套的；*/flex-direction: row;}aside {flex: 0 0 40px; /*坐位子项目的属性*//*并且把他变成容器;*/display: flex;flex-direction: column;/*分别定义在主轴和交叉轴上的对齐方式滴呀；效果是非常好滴呀*/justify-content: space-around;/*justify-content属性定义了项目在主轴上的对齐方式。*/align-items: center;/*align-items属性定义项目在交叉轴上如何对齐*/background-color: #f2f2f2;}aside i.fa {font-size: 0.9em; /*font size for the icons*/}footer {display: flex;flex: 0 0 90px; /*不放大，不收缩，固定在90px的高度；*/padding: 10px;color: #fff;background-color: rgba(61, 100, 158, .9);}/*别忘了这里一直有我们的一个默认特性align-items:stretch;默认是在我们的水平方向上进行拉伸滴呀；*/.content {display: flex;flex: 1 0 auto; /*确保延伸填充到整个项目中去滴哎呀*/flex-direction: column;}.music-head {flex: 0 0 280px;display: flex;padding: 40px;background-color: #4e4e4e;}.music-list {flex: 1 0 auto;list-style: none;padding: 5px 10px 0px;/*顺便复习一下，margin 和padding的简写方式margin:依次的顺序是 上 右 下 左margin:0px; 全部边距为0；margin:10px 10px; 上下左右各自10margin:10px 20px 30px; 上  左右 下;*//*响应式webapp考虑的东西不仅仅是响应式布局，还有我们图片，等一些的响应式效果*//*我是一个集感性与理性与身的人；*/}li {display: flex;padding: 0 20px;min-height: 50px;}ul{padding:0;}li p {flex: 0 0 25%;/*不要伸展，不要收缩，每个段落占据25%可用空间*/}li span.catty-cloud {border: 1px solid black;font-size: 0.6em;padding: 3px;}li:nth-child(2n) {background-color: #f2f2f2;}.music-detail {flex: 1 0 auto;display: flex;flex-direction: column;font-weight: 300;color: #fff;padding-left: 50px;}.music-detail div:nth-child(1) {margin-bottom: auto; /*神奇的margin-bottom  可以用这个来代替:justify-content:space-between;*/}.music-detail div:nth-child(2) {margin-top: 0;}.music-detail div:nth-child(2) i.fa {font-size: 0.9em;padding: 0 0.7em;font-weight: 300;}.music-detail div:nth-child(1) p:first-child {font-size: 1.8em;margin: 0 0 10px;}.music-detail div:nth-child(1) p :not(:first-child) {font-size: 0.9em;margin: 2px 0;}.catty-music-small {display: flex;margin-right: auto;}.catty-music-small img {padding-right: 10px;width: 100px;}.catty-music-controls {display: flex;align-items: center;justify-content: space-between;width: 50%;}/*后面就要开始做我们额响应效果了滴拉；效果是非常好滴呀呀*/@@media screen and (max-width: 64em) {.sm-hide {display: none; /*左侧边栏要消失*/}.sm-text-center {text-align: center;}.sm-text-right {text-align: right;}.music-head img {width: 150px;}section.content .music-head {flex: 0 0 auto;display: flex;flex-direction: column;align-items: center;background-color: #4e4e4e;}section.content .music-head .music-detail{padding: 0;}.music-detail div:nth-child(1) p:first-child {margin: 20px 0;font-size: 1em;}li p {flex: 0 0 50%;}.catty-music-controls {justify-content: space-around;}}</style>
</head>
<body><main><aside class="sm-hide"><i class="fa fa-bars"></i><i class="fa fa-home"></i><i class="fa fa-search"></i><i class="fa fa-volume-up"></i><i class="fa fa-user"></i><i class="fa fa-spotify"></i><i class="fa fa-cog"></i><i class="fa fa-soundcloud"></i></aside><section class="content"><div class="music-head">@*音乐的详情页面*@<img src="http://i.imgur.com/xDSTaej.jpg" alt="hello my name is frank" />     @*专辑封面*@<section class="music-detail"><div><p class="sm-text-center">CattyBoard Top 100 Single Charts (11.06.36)</p><p class="sm-hide">Unknown Artist</p><p class="sm-hide">2016 . Charts . 100 songs</p></div><div class="sm-text-center">@*音乐操作控制面板*@<i class="fa fa-play"> &nbsp;Play all</i><i class="fa fa-plus"> &nbsp;Add to</i><i class="fa fa-ellipsis-h">&nbsp;&nbsp;More</i></div></section></div><div class="music-list"><ul><li><p>1. One Dance</p><p class="sm-hide">Crake feat CatKid &amp; Cyla</p><p class="sm-text-right">2:54</p><p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p></li><li><p>2. Panda</p><p class="sm-hide">Cattee</p><p class="sm-text-right">4:06</p><p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p></li><li><p>3. Can't Stop the Feeling!</p><p class="sm-hide">Catin Cimberlake</p><p class="sm-text-right">3:56</p><p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p></li><li><p>4. Work From Home</p><p class="sm-hide">Cat Harmony feat Colla</p><p class="sm-text-right">3:34</p><p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p></li></ul></div></section></main><footer><div class="catty-music-small"><img src="http://i.imgur.com/xDSTaej.jpg" class="sm-hide"><div><p>If It Ain't Love</p><p>Catson Derulo</p></div></div><div class="catty-music-controls"><i class="fa fa-step-backward"></i><i class="fa fa-pause"></i><i class="fa fa-step-forward"></i><i class="fa fa-rotate-right sm-hide"></i><i class="fa fa-random sm-hide"></i></div></footer>
</body>
</html>

总的来说，这个项目的知识点，还是挺多的，首相是我们布局的划分，你可以理解成，div如何进行嵌套！

让后，就是利用我们flex 布局的特性来实现我们想要的效果；

还有，就是我们响应式设计的特点，当然少不了我们的ui设计，包括颜色的搭配，空间的合理布局

等等；这个一个非常好的示例效果；非常棒滴呀；

ps：这个不是原创的，是我临摹国外大神的一个作品：

参考链接：

https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af

转载于:https://www.cnblogs.com/mc67/p/7255938.html

flex布局完整示例相关推荐

移动端携程网首页flex布局完整制做(详细代码版)含footer部分
目录 1.样式展示 2.全部代码 2.1.index.htnl文件 2.2.index.css文件 3.分布研究 3.1 初始准备 3.2在index.css文件中写body的样式,引入字体图标等基本 ...
flex布局实现骰子六面的示例
显示效果: 下面是示例代码: <html><head><title>flex布局-骰子</title><style>body {backgr ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
div布局、table布局、flex布局、多列布局、网格布局示例
目录基础代码 demo.html css/common.css div实用布局示例代码效果图 table布局代码效果图 flex布局代码效果图多列布局代码效果图网格布局代码效 ...
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left.right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应. 要求:允许增 ...
Flex布局示例简述-携程App主页布局
Flex布局示例简述-携程App主页布局使用要点无论是块元素,还是内联元素,都可以被指定为flex布局: flex items是任何直接子元素,既可以是块元素,也可以是内联元素: flex ite ...
详解flex布局(flexbox)完整指南
一.背景 Flexbox Layout(Flexible Box) 模块(截至2017 年 10 月的 W3C 候选推荐标准)旨在提供一种更有效的方式来布置.对齐和分配容器中项目之间的空间,即使它们的 ...
html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
html横向排列flex,flex布局示例
作者:水牛01248 几个横排元素在竖直方向上新直能分支调二浏页器朋代说,居中 display: flex; flex-direction: row;//横向排列 align-items: cente ...
flex布局超级详细的完整教程(看完印象深刻)
flex布局超级详细教程文章目录 flex布局超级详细教程 flex 布局父项常见属性 ①.flex-direction:设置主轴的方向 ②. justify-content:主轴上的子元素排列方式 ...

flex布局完整示例

flex布局完整示例相关推荐

最新文章

热门文章