作为一个js、CSS、RN新手,总是会遇到各种样式。在不知道样式有些什么的情况下难以很好的绘制布局。所以这里整理了一下几个常用布局的样式。 View Style 支持Flexbox、ShadowPropTypesIOS、Transforms属性。 背面可见性 背景颜色 边框颜色 边框圆角半径 边框样 ...
分类:
其他好文 时间:
2017-09-05 12:32:21
阅读次数:
274
常用例子 1.居中对齐 效果: 2.自适应导航 效果: 3.常见3栏移动优先布局 设置子元素从左到右,超出换行(flex-flow:row wrap;)。 默认情况下所有子元素拓展比例为1(flex-grow:1),伸缩比例为100%(flex-basis:100%)。 大于800px时,.main ...
分类:
Web程序 时间:
2017-08-24 00:12:34
阅读次数:
250
父级: isplay: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-directi ...
分类:
其他好文 时间:
2017-08-21 20:37:49
阅读次数:
146
box-flex布局在这几年发生了多次变化,可分为2009版、2011版以及2013版, 区分: display:box(inline-box), box-{*}的格式为2009版 display:boxflex(inline-flexbox), flex()为2011版 display:flex( ...
分类:
其他好文 时间:
2017-08-20 15:42:45
阅读次数:
135
一、 弹性盒模型 1、弹性盒子模型介绍 弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现容器里项目的对齐、方向、排序(即使在线吗大小位置、动态生成的情况)。 弹性盒模型最大的特征在于,能够 ...
分类:
Web程序 时间:
2017-08-17 15:44:59
阅读次数:
211
前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档。这里只是总结。 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版本的设备(Android4.4以下,只能兼容旧版的flexbox布局),还有个别的国产设备并不支持f ...
分类:
Web程序 时间:
2017-08-14 21:22:14
阅读次数:
249
一、设置等宽的表格 table设置宽,则每列平分table的宽 示例 二、flexbox 布局 智能计算padding 容器属性(CSS的columns在伸缩容器上没有效果) flex-direction: row | row-reverse | column | column-reverse; f ...
分类:
Web程序 时间:
2017-08-14 00:34:03
阅读次数:
229
一、CSS3属性的兼容 transform: rotate(45deg) scale(1.5) translate(150px, 200px); 二、什么是弹性布局 CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定、调 ...
分类:
其他好文 时间:
2017-08-06 14:59:47
阅读次数:
175
首先移动端开发最基本的就是尺寸问题: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 这行代码 ...
分类:
移动开发 时间:
2017-08-01 12:45:13
阅读次数:
266
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏 ...
分类:
Web程序 时间:
2017-07-08 18:54:18
阅读次数:
227