鲁中-O-华仔

夫君子之行,静以修身,俭以养德,非淡泊无以明志,非宁静无以致远。

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

2019年5月19日 #

Flex 布局语法教程

一、【语法】Flex-弹性布局(注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。)

display:flex;  /*首先需要写出来的*/
flex-direction: row | row-reverse | column | column-reverse;
/* (默认)左到右 | 右到左 | 上到下 | 下到上 */ --- 排列方式 flex-wrap: nowrap | wrap | wrap-reverse; /* (默认)不换行 | 换行,第一行在上| 换行,第一行在下| 下到上 */ ---- 是否换行 flex-flow: <flex-direction> <flex-wrap>; /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。*/ justify-content: flex-start | flex-end | center | space-between | space-around; /* (默认)左对齐| 右对齐| 居中| 两端对齐 | 间隔相等分散*/ --- 水平 align-items: flex-start | flex-end | center | baseline | stretch; /* 上对齐| 下对齐 | 中心点对齐| 项目内第一行文字基线对齐| (默认)占满整个高度 */ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /* 与交叉轴的起点对齐 | 与交叉轴的中点对齐 | 与交叉轴两端对齐,轴线之间的间隔平均分布。| 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 | (默认值)轴线占满整个交叉轴。*/

二【兼容性】display:flex;     -----定义在父元素上,子元素会成为--行元素

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
display: -moz-box; /* Firefox 17- */  
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
display: -moz-flex; /* Firefox 18+ */  
display: -ms-flexbox; /* IE 10 */  
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 

三【兼容性】flex-direction: row | row-reverse | column | column-reverse;     ----- 定义在父元素上,可修改子元素排列方向(上下左右)

 

-webkit-box-orient: vertical;/* 09版 */
-webkit-flex-direction: column;/* 12版 */
-moz-flex-direction: column; /* Firefox 18+ */
-ms-flex-direction: column; /* IE 10 */
-o-flex-direction: column;
flex-direction: column; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 

 

三   【兼容性】 /* 子元素的某一个      用于改变源文档顺序显示   谁大谁在后面 */

-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
-ms-flex-order: 2;              /* TWEENER - IE 10 */
-webkit-order: 2;               /* NEW - Chrome */
order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

 

 

三【兼容性】其他写法

/*display*/
.display_flex{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.display_flex > *{ display: block; }
.display_inline-flex{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; }
.display_inline-flex > *{ display: block; }
/*伸缩流方向*/
.flex-direction_column{ -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
/*主轴对齐*/
.justify-content_flex-center{ -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
.justify-content_flex-end{ -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }
.justify-content_flex-justify{ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
/*侧轴对齐*/
.align-items_flex-start{ -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
.align-items_flex-end{ -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; }
.align-items_center{ -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.align-items_baseline{ -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; }
/*伸缩性*/
.flex_auto{ -webkit-box-flex: 1; -ms-flex: auto; -webkit-flex: auto; flex: auto; }
.flex_1{ width: 0; -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }
/*显示顺序*/
.order_2{ -webkit-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; }
.order_3{ -webkit-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; }

本文来源:https://www.jianshu.com/p/49cdc1a0b69b

https://www.baidu.com/link?url=W5eaymxkH31533zzGDSqvyOnCPTbZEBGDJPKVLK-XktY_eFQkhtkXedfnE36q0bNly-NtfsUyNQrtRkAgekdK_&wd=&eqid=df9b512200147ccf000000035ce0fc11

posted @ 2019-05-19 14:49 鲁中-O-华仔 阅读(173) 评论(0) 推荐(0) 编辑

2019年3月26日 #

移动端--用PX为单位+JS框架 实现页面布局

摘要: 一:大家先下载metahandler.js 二:准备一个用px实现的移动页面(宽度固定死的页面),引入metahandler.js框架 1、视口设置 width=640,是根据psd图来设置,有多宽设置多宽(设计图是640的设置640) <meta content="target-densitydp 阅读全文

posted @ 2019-03-26 21:23 鲁中-O-华仔 阅读(1195) 评论(0) 推荐(0) 编辑

2019年2月17日 #

IE8下实现兼容rgba

摘要: rgba的含义,r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透明度为0.5的黑色。现代浏览器是支持rgba的,但是在IE8等古董级浏览器中是不支持rgba的,IE8只能勉强支持rgb()函数(即 阅读全文

posted @ 2019-02-17 08:23 鲁中-O-华仔 阅读(215) 评论(0) 推荐(0) 编辑

2019年1月24日 #

web网页、手机app设计规范

摘要: app设计规范 目前,很多APP设计师的APP Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。 当然下面的10个方面的不仅是iPhone6界面视觉设计 阅读全文

posted @ 2019-01-24 16:39 鲁中-O-华仔 阅读(810) 评论(0) 推荐(0) 编辑

2018年12月28日 #

media 标签解释

摘要: 一:常用标签这句话是自动设置缩放,然而,它并不能完全适应所有的手机,并且你在用浏览器手机模式调试的时候可能正常,但是换到真实的手机端其实是不正常的。所以我们还要进行改动。 对于IE6、7、8需要考虑到兼容 2、忽略页面中的数字识别为电话,忽略email识别 <!--禁止将页面中的一连串数字识别为电话 阅读全文

posted @ 2018-12-28 12:50 鲁中-O-华仔 阅读(333) 评论(0) 推荐(0) 编辑

2018年12月23日 #

rem 是如何实现自适应布局的

摘要: 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。· rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综 阅读全文

posted @ 2018-12-23 09:57 鲁中-O-华仔 阅读(223) 评论(0) 推荐(0) 编辑

响应式和自适应的区别

摘要: 响应式网站:https://www.microsoft.com/zh-cn/ 页面缩放,框架变动 自适应网站:http://m.ctrip.com/html5/ 页面缩放,整体等比例缩放(框架不变) 响应式 一、响应式布局框架的优点、缺点、原理 优点: 1.面对不同分辨率设备灵活性强 2.能够快捷解 阅读全文

posted @ 2018-12-23 09:48 鲁中-O-华仔 阅读(292) 评论(0) 推荐(0) 编辑

自适应--手机端网页代码

摘要: 一:必读:响应式和自适应的区别:https://www.cnblogs.com/guozh/p/10163339.html 二:rem 是如何实现自适应布局的: https://www.cnblogs.com/guozh/p/10163350.html 一:在头部加入代码 1.第一行: 这句话是自动 阅读全文

posted @ 2018-12-23 09:16 鲁中-O-华仔 阅读(2255) 评论(0) 推荐(0) 编辑

2018年12月22日 #

详解CSS中:nth-child的用法

摘要: 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,“2可以是你想要的数字” :nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同 :nth-child(-n+4)选取小于 阅读全文

posted @ 2018-12-22 16:52 鲁中-O-华仔 阅读(12237) 评论(0) 推荐(0) 编辑

去除最后一个li的样式

摘要: 推荐::::方法一,使用:first-child 纯css的:first-child伪类就可以胜任此任务,操作很方便,代码量忽略不计。支持IE7+,不支持IE6 :first-child /:last-child伪类向元素的 第一个 / 最后一个 子元素添加样式。 延伸:li:nth-child(2 阅读全文

posted @ 2018-12-22 16:34 鲁中-O-华仔 阅读(496) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示