代码人生的小狗窝

一行行枯燥的代码,却描绘出人生的点点滴滴

推荐文章

flex 格局 初次接触这个好使又不是特别好用的布局方法

    flex 布局 初次接触这个好使又不是特别好用的布局方法  刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而,当自己把页面放缩时。。。。画风就莫名其妙的变了,没错 ,就是变了,变得很乱很丑,再把网页放到手机上:卧槽这是哪个战斗力五颗渣的家伙写的啊,整个页面一坨一坨的堆积在一起。   然后就钻研js响应式布局,写着写着,哎呀我去,这是哪一个的宽啊,这是哪一个元素的高啊,这个比例等下设置为多少,跟上一个需不需要一样,会不会再放缩这个比例又会排乱,一些列计算之后,终于,写出了一个满意的响应式布局,再看看自己的代码,写了好多有木有。   这时CSS3里的flex布局方法就显得简单易用,大手一敲,啪啪啪,一行代码,自适应问题就解决了,不用float,不

    阅读全文>>

作者:coody分类:【_Flex浏览(1590

2019-08-18

Flexbox格局

    Flexbox布局Flexbox布局 刚开始接触flex布局的时候,只知道它可以用来使子元素水平垂直居中,代码最为简洁好用。 .container { display: flex; justify-content: center; align-items: center; } 当然不仅仅是居中问题,flexbox能做的事情大多,能够简单快速解决我们布局所遇到的问题,例如: 可以轻松实现两列、多列布局自适应屏幕的大小,而无需设置块浮动 如果元素容器没有足够的空间,无需重新计算每个子元素的宽度,就可以设置它们在同一行 可以快速让子元素布局在一列,如小屏幕的时候 可以让在子元素相对容器居上、下、左、右、中布局 可以通过属性order随时改变元素出现的顺序,无需改变HTM结构,以便适应屏幕大小不同和设备差异 如果元素容器设置百分比sui视窗大小改变,不用提心未指定

    阅读全文>>

作者:coody分类:【_Flex浏览(756

2019-08-16

崭新 FlexGrid 功能演示 Demo 正式上线

    全新 FlexGrid 功能演示 Demo 正式上线 FlexGrid是一款易用、灵活的高性能表格控件,为最终用户提供了一种多功能、高性能业务数据展示和管理能力。它提供了完备的表格控件数据处理能力,无论是绑定数据源、非绑定模式还是树形业务数据模式,可以高性能加载数据,加载100万行×10列数据仅需0.27秒; 日前,全新FlexGrid功能演示Demo正式上线。新Demo包含了FlexGrid几个常用的功能:分组、滚动、冻结、自定义单元格类型、搜索面板、表格过滤器、树形结构、合并单元等。Demo中也展示了其它常用的控件,如C1Ribbon、C1Navbar、C1CommadDock、C1DockTab等。 一、FlexGrid目前常用的应用示例 新发布的FlexGridDemo使用程序员非常熟悉的VS IDE布局,充分展示了ComponentOne Studio的布局功能强大,

    阅读全文>>

作者:coody分类:【_Flex浏览(1301

2019-08-15

Flex格局的学习经验

    Flex布局的学习经验做为css布局的又一种新方式,Flex拥有极强的使用效果,相比原来的float,position对元素样式的操作更加简洁,本文是我的一点学习经验和心得吧,如有错误以及不足之处,请多多指点。 好进入正题吧,首先借用阮一峰大神的一副图片:   再来说说flex的几个属性吧: 一、容器属性 1.flex-direction : row | row-reverse | column | column-reverse;   这个属性是定义元素在主轴上的排列顺序的,也就是上面的(main axis)   row:元素在主轴上以水平的方向排列的,起点在左端(同时,这个也是默认值)   row-reverse:元素在主轴上以水平的方向排列的,起点在右端   column:元素在主轴上以垂直的方向排列的,起点在上方   column-reverse:元素在主轴上以

    阅读全文>>

作者:coody分类:【_Flex浏览(983

2019-08-17

深入了解CSS3 Flexbox

    深入理解CSS3 Flexbox文章来源:http://www.zhufengpeixun.cn/article/173 一、前言 Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS3 的规范终于普及 ( 或 IE 终于败亡 ),加上行动装置的发展促成了响应式布局兴起,自适应长宽弹性相当大的 Flexbox 就趁势而起了。 第一步要来看 Flexbox 的盒子模型,根据 W3C 文章所描述,flex 的盒子模型如下图所呈现,与一般的盒子模型不同的地方,在于 Flexbox 的盒子模型具有水平的起点与终点 ( main start、main end ),垂直的起点与终点 ( cross start、cross end ),水平轴与垂直轴 ( main a

    阅读全文>>

作者:coody分类:【_Flex浏览(434

2019-08-18

Flex中使用CSS控制页面式样

    Flex中使用CSS控制页面样式Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css   在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也可以新建一个CSS文件,在这个文件中写样式,后者更便于管理。   先来看看直接在mxml文件中写样式: 方法一:直接在想要控制的控件中直接写CSS元素,如left,right,top等; 方法二:还可以将CSS样式写在<fx:Style><fx:Style/>标签中,示例代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 3

    阅读全文>>

作者:coody分类:【_Flex浏览(871

2019-08-17

display的flex跟inline-flex属性区别

    display的flex和inline-flex属性区别 【前言】    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。    下面来讲解下display的flex和inline-flex属性区别   【概论】    flex: 将对象作为弹性伸缩盒显示    inline-flex:将对象作为内联块级弹性伸缩盒显示   【原理】    赋予父容器更改子元素宽高(或顺序)的能力,来更好的填充可用的空间(主要使其适应各种显示设备和屏幕尺寸)。一个使用Flexbox布局的父容器会伸展每个子元素来填充可用的空间,或者压缩它们来阻止超出父容器。     最重要的是,Flexbox布局在方向上是不可预知的,这一点和常归布局不同(常规布局中块是基于竖直方向排列的,而内联是基于水平方向)。这些常规布局在页面中显

    阅读全文>>

作者:coody分类:【_Flex浏览(1958

2019-08-17

信息系统实践手记6-JS调用Flex的性能有关问题一例

    信息系统实践手记6-JS调用Flex的性能问题一例  说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题。笔者对其中比较典型的加以收集,描述,归纳和分享。 摘要:此文描述了笔者接触过的部分信息系统或平台之间的对接构型和情况,挂一漏万的总结分享之。 正文 系列随笔目录:信息系统实践手记 (http://www.cnblogs.com/taichu/p/5305603.html) 作者:太初 转载说明:请指明原作者,连接,及出处。   正文   在笔者实践中,越到有些情况下(比如开发GIS地图应用),客户端的JS代码往往要调用GIS地图引擎的API。 有些API提供JS接口(版本),那是最方便的,有些提供诸如FLEX编程接口的API,让你在JS中调用,也是可以,但遇到如下情况,分享之。  

    阅读全文>>

作者:coody分类:【_Flex浏览(475

2019-08-18

flex兼容性有关问题

    flex兼容性问题flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器) 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /*justify-content: center*/ span { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*align-items: center*/ span {

    阅读全文>>

作者:coody分类:【_Flex浏览(1021

2019-08-18

懂得Flexbox弹性盒子

    理解Flexbox弹性盒子http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档 1:要开始使用Flexbox,必须先让父元素变成一个Flex容器。 你可以在父元素中显式的设置display:flex或者display:inline-flex。就这么的简单,这样你就可以开始使用Flexbox模块。   2.Flex容器属性 flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content flex-direction: row || column || row-reverse || column-reverse;   flex

    阅读全文>>

作者:coody分类:【_Flex浏览(807

2019-08-16

flex 碰到white-space:nowrap

    flex 遇到white-space:nowrap背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响 解决办法,父div设置min-width:0即可 <div style="width:100%;display:flex;height:80px"><div style="width:50px"><img src="~/Content/Img/2.png" style="height:50px;" /></div><div style="flex:1;min-width:0"> <div style="width:100%;height:4

    阅读全文>>

作者:coody分类:【_Flex浏览(1402

2019-08-17

flex格局实例(二)

    flex布局实例(二) 【前言】    首先flex的出现是为了解决常见哪些问题呢?    一、页面行排列布局    二、div上下左右居中   【详解】    一、页面行排列布局    常见的为左右两个div并排显示,可以用浮动布局来处理 <style type="text/css"> .main{ height: 300px; width: 600px; } .left,.right{ border: 1px solid red; height: 200px; text-align: center; line-height: 200px; } .left{ width: 48%; float: left; } .right{ width: 48%;

    阅读全文>>

作者:coody分类:【_Flex浏览(1190

2019-08-16

flex格局实例(一)

    flex布局实例(一) 【前言】    昨天总结了下flex布局的基础语法,今天来做几个实例深入学习下。    推荐一篇不错的博主:阮一峰老师,文章写的十分详细,结合简单图片解析后可以快速理解。    下面记下根据教程学习后的笔录   【列表】 (1)经典的骰子布局(1点和6点) (2)网格布局 (3)圣杯布局 (4)输入框布局   【主体】 (1)经典的骰子布局 基本模板架构: <div class="box"> <span class="item"></span> </div>    div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推    ①六点 <style type="text/css"> .box{

    阅读全文>>

作者:coody分类:【_Flex浏览(789

2019-08-16
上一页 1/187页 下一页