flex布局 | 易学教程

上下固定，中间自适应，超出显示滚动条 flex布局

阅读更多关于上下固定，中间自适应，超出显示滚动条 flex布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ padding:0; margin:0; height:100%; /*定义页面整体高度为100%，重要*/ } .container{ display:flex; /*父元素的定义为flex布局*/ width:100%; height:500px; /*这里也要定义，重要*/ flex-direction: column; /*定义排列方向为竖排*/ } .header{ height:100px; /*头部固定高度*/ background: red; } .footer{ height:100px; /*尾部固定高度*/ background: yellow; } .main{ background: #ccc; flex:1; /*中间分配剩下的所有空间*/ overflow:auto; } </style> <body> <div class="container"> <div class="header">我是头部</div> <div class="main"> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>

display:flex

阅读更多关于 display:flex

今天写一个前端页面，仿造千层网那种，用display:flex布局遇到的几个问题首先是间隔问题，justify-content：space-between和space-around的区别 space-around我觉得就是会首尾留白 between就是首尾不留白，DIV之间的间隔更大然后做一个类似QQ标签的那种就用到了width:fit-content; 这样DIV大小就会随着内容自动了，就不用用flex里的flex-shrink来自动压缩内容，因为设置了这个再想让他wrap换行就不行了然后最后记录一个阴影框效果 box-shadow:0 0 9px 3px rgba(191,191,191,.5); 文章来源: display:flex

2-4 【接口Interface Flex布局】让顶部导航滚动

阅读更多关于 2-4 【接口Interface Flex布局】让顶部导航滚动

可以把复杂的类型做命名。例如接口中没有定义年龄，在定义person的时候如果写了age那么就会报错。因为我们接口中并没有定义年龄。可选属性，只读属性新的布局方式下面这里menu设置类型为TopMenu的接口，那么后面的热门、男装、手机就报错了。输入了title属性后，还缺少link的属性。想让link属性可选。link属性后面加问号就可以了。设置link属性为只读的因为link设置了为只读的，所以下面定义的test方法里面给link属性赋值就会报错了。接口的函数定义参数都是number类型的。返回的类型也是number类型的 es6箭头函数的写法相当于下面这种方式的简写，省略了大括号和return 只有一行内容可以简写成这种写法接口-字典类型定义索引的类型是字符类型，且索引值也是字符类型。定义字典类型的时候，如果复制了数字1 那么就会报错了。因为规定的是string类型的改成string类型就没问题了输出a的值看一下前端需要改一下把test改成constructor构造函数默认输出了字典的值这里为什么有绿线呢？其实是可以直接用点的形式，这种写法把josn的数据复制过来。我们希望菜单是不折行，在上面滚动的。外层用flex布局按照行布局每个item折行了。 column布局 row-reverse 倒着排列。人们拍在了最后。竖着

flex布局入门总结――语法篇

阅读更多关于 flex布局入门总结――语法篇

前几天看了阮一峰的Flex布局教程，讲的很不错，总结一下,有兴趣的可以去看原文 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex全名Flexible Box即弹性布局，基本用法：display:flex; 行内元素：display:inline-flex webkit内核的浏览器必须加上-webkit前缀 .box{ display: -webkit-flex; /*safari */ display: flex; } float 、属性将失效采用 Flex 布局的元素，它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis） .box { flex-direction: row | row-reverse | column | column-reverse; /* row是默认值 */ } .box{ /* nowrap默认值不换行； wrap换行，第一行在上方； wrap-reverse换行，第一行在下方。*/ flex-wrap: nowrap | wrap | wrap-reverse; } flex-direction 属性和 flex-wrap 属性的简写形式

浅谈新的布局方式-flex

阅读更多关于浅谈新的布局方式-flex

引言：　　网页布局在flex出来之前，是由盒模型为底子，float，position，table，百分比来进行布局的，重绘的比较多，影响性能，复杂又不好维护。flex布局，可以简便、完整、响应式地实现各种页面布局。我在网上看到有很多写flex布局的博文，自己就写着复习一下这个flex布局。一基本概念：　　采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。（任何一个容器都可以指定为Flex布局，块级元素，行内元素也可。）　　它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。二属性：　容器的 6 大属性：　　 1 flex-direction 项目的排列方向　　　　flex-direction: row;（默认值）主轴为水平方向,从右往左。　　　　　　　　　　 row-reverse; 主轴为水平方向，从左往右。　　　　　　　　　　 column; 主轴为垂直方向，从上往下。　　　　　　　　　　　column-reverse; 主轴为垂直方向，从下往上。　　 2 flex-wrap 是否换行　　　　flex-wrap: no-wrap（默认）：不换行。　　　　　　　　 wrap : 换行。　　　　　　　　　 wrap-reverse : 换行，从下往上换行。　　 3 flex

水平，垂直居中的15种方法

阅读更多关于水平，垂直居中的15种方法

一.水平居中 1.文字水平居中 <div class="one"> 　　测试居中 </div> <style> .one{ 　　width: 200px; 　　height: 100px; 　　border:1px solid red; 　　 text-align: center; } </style> 2.盒子居中 <div class="one">是盒子居中</div> <style> .one{ 　　width: 200px; 　　height: 100px; 　　border:1px solid red; 　　 margin: 0 auto; } </style> 3.多块级元素水平居中 <div class="container"> <div class="child"> 简单不先于复杂 </div> <div class="child"> 而是在复杂之后 </div> <div class="child"> 简单不先于复杂，而是在复杂之后。 </div> <div class="child"> 简单不先 </div> </div> <style> .container { 　　height:100px; 　　padding: 8px; 　　 text-align: center; 　　border: 2px dashed #f69c55; } .child { 　

CSS3 弹性盒子

阅读更多关于 CSS3 弹性盒子

理解： CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。设置弹性盒子：弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。实例：完美解决居中问题 margin: auto; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: auto; } </style> </head> <body> <div class="flex-container"> <div class="flex-item"

css布局

阅读更多关于 css布局

css中的三种基本定位机制　　a.普通文档流　　b.定位：相对定位　　　　　　绝对定位　　　　　　固定定位　　c.浮动 1.普通流中，元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，行内元素在一行中水平布置 2.相对定位看作普通流的一部分，移动后的元素仍占据原来的位置，移动元素会导致他覆盖其他的框 3.绝对定位相对于已定位的最近的祖先元素，绝对定位脱离普通流 4.固定定位是相对于浏览器窗口的定位 5.浮动的元素可以左右移动，直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘 6.浮动的元素脱离普通文档流 7.行内元素和行内块元素会围绕浮动框排列，块元素会被覆盖 display 1.Flex容器　　justify-content　项目在主轴上的对齐方式　　align-content　　定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用 flex-direction 属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。 flex-wrap 属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse（你懂的~） flex-flow

微信小程序 bug 集中营

阅读更多关于微信小程序 bug 集中营

本文转载于: 猿2048 网站➮ https://www.mk2048.com/blog/blog.php?id=c1ccbhj0j Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-10-22 09:58:07 Hello 小伙伴们，如果觉得本文还不错，记得给个 star ，你们的 star 是我学习的动力！ GitHub 地址 GitHub 最新更新：2018-10-17 13:34:11。追求最新文章的小伙伴可前往下载，掘金上的文章每周六、日更新。写在前面首个微信小程序实践记录: 工作量: PSD 18 张 (导出的 JPG 30 张) 耗时：12 个工作日总结1: 在页面制作商，需要 3 周工作日（工作 15 天）搞定，前后端对接口另计。实际上，12 个工作日可以搞定所有页面，但是应该往前铺 1.5D 熟悉框架，往后铺 1.5D 整理代码。当然每个人的耗时可能不同，可根据个人实际情况进行调整。总结2：在 API 调用上，根据接口数量可能需要 7-12 个工作日进行 API 调用，难点表现在： 1. 接口不够丰富，数据量不足； 2. 接口数据不够正式真实，跟前面的假数据相差太大； 3. 接口可能没法正常调用等原因。故因根据小程序业务逻辑进行工作时长的报备。这里有

Flex布局兼容性写法

阅读更多关于 Flex布局兼容性写法

flex布局 flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法效果良好~ /* ============================================================ flex：定义布局为盒模型 flex-v：盒模型垂直布局 flex-1：子元素占据剩余的空间 flex-align-center：子元素垂直居中 flex-pack-center：子元素水平居中 flex-pack-justify：子元素两端对齐兼容性：ios 4+、android 2.3+、winphone8+ ============================================================ */ .flex { display : -webkit-box ; display : -webkit-flex ; display : -ms-flexbox ; display : flex ;} .flex-v { -webkit-box-orient : vertical ; -webkit-flex-direction : column ; -ms-flex-direction : column ; flex-direction : column ;} .flex-1 { -webkit-box-flex : 1 ;

订阅 flex布局