flex.css能完美的运行在移动端的各种浏览器,甚至能运行在ie10+的各种PC端浏览器中

flex和data-flex

flex.css 有两个版本,一个是flex.css一个是data-flex.css,这两个版本其实是一样的,
唯一的区别是,一个是使用flex属性设置,一个是使用data-flex属性设置。react 不支持flex属性直接布局,所以data-flex.css实际上是为了react而诞生的
 
官方地址:https://github.com/lzxb/flex.css
 
npm安装:
npm install --save flex.css
 
使用说明:
<!--
将dist目录下的css文件引入到你的页面中,根据你的需要引入
flex.css 使用flex属性匹配
data-flex.css 使用data-flex属性匹配(React使用)
如果使用了webpack打包,npm安装后,并且配置了ES6编译器的话,
flex 属性匹配可以直接使用:
import 'flex.css';
data-flex 属性匹配可以直接使用(react使用)
import 'flex.css/dist/data-flex.css';
-->
<!-- flex属性匹配,简单的子元素居中例子: -->
<div flex="main:center cross:center" style="width:500px; height: 500px; background: #108423">
<div style="background: #fff">看看我是不是居中的</div>
</div> <!-- data-flex属性匹配,简单的子元素居中例子: -->
<div data-flex="main:center cross:center" style="width:500px; height: 500px; background: #f1d722">
<div style="background: #fff">看看我是不是居中的</div>
</div>

flex属性大全

dir:主轴方向
top:从上到下
right:从右到左
  bottom:从下到上
  left:从左到右(默认)
main:主轴对齐方式
right:从右到左
left:从左到右(默认)
justify:两端对齐
center:居中对齐
cross:交叉轴对齐方式
top:从上到下(默认)
bottom:从上到下
baseline:基线对齐
center:居中对齐
stretch:高度并排铺满
box:子元素设置
mean:子元素平分空间
first:第一个子元素不要多余空间,其他子元素平分多余空间
last:最后一个子元素不要多余空间,其他子元素平分多余空间
justify:两端第一个元素不要多余空间,其他子元素平分多余空间

flex.css声明式布局的更多相关文章

  1. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  2. 关于CSS自文档的思考_css声明式语言式代码注释

    obert C. Martin写的<Clean Code>是我读过的最好的编程书籍之一,若没有读过,推荐你将它加入书单. 注释就意味着代码无法自说明 —— Robert C. Martin ...

  3. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  4. AngularJS应用开发思维之1:声明式界面

    这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板.指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以 ...

  5. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  6. 不用bootstrap,只用CSS创建网格布局

    本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...

  7. flex的使用以及布局 转载

    转 : http://www.cnblogs.com/waisonlong/p/6055020.html flex的使用以及布局   1.添加flex属性后的区别 1 2 3 4 5 6 7 8 9 ...

  8. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  9. CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

    新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...

随机推荐

  1. Docker 私服Registry简介与使用Docker-Compose安装Registry

    场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  2. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. Python语法速查: 12. 文件与输入输出

    返回目录 (1)文件基本操作 ● 文件常用操作 内置函数或方法 描述 open(name [,mode [,buffering]]) 内置函数.用来打开文件,返回一个文件对象(file对象).详见下述 ...

  4. Django中的sql注入

    Django中防止SQL注入的方法 方案一总是使用Django自带的数据库API.它会根据你所使用的数据库服务器(例如PostSQL或者MySQL)的转换规则,自动转义特殊的SQL参数.这被运用到了整 ...

  5. JavaWeb包含哪些内容

    JavaWeb JavaWeb课程内容涉及:HTML5课程.CSS3.JavaScript.MySQL使用.JDBC连接池.Servlet.JSP.AJAX.jQuery.Bootstrap. 第一部 ...

  6. 微信小程序的坑(持续更新中)

    参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的 ...

  7. 从荣耀 xSport Pro 运动蓝牙耳机发布看蓝牙立体声耳机的新动态

    10月22日,荣耀在北京举行新品发布会,不仅带来了荣耀20青春版手机,还正式发布了荣耀xSport PRO运动蓝牙耳机.该款耳机是荣耀全新一代颈戴式运动蓝牙耳机,兼具运动和时尚属性,高颜值的渐变色机身 ...

  8. 【linux知识】文件存储结构及物理设备命名(FHS)

    FHS是文件系统层次化标准(Filesystem Hierarchy Standard). 一切从根目录 " / " 开始. Linux中常见目录及对应内容: 路径分为:绝对路径( ...

  9. lombok深入实践

    官网视频 官网地址:https://projectlombok.org 官网的首页视频演示在eclipse中如何使用Lombok; Project Lombok is a java library t ...

  10. 我的计划任务 --- 实现市电停电安全关闭群辉,Windows, Linux等设备

    有一次突然停电,我的群辉DS218+ 的一块硬盘出现故障了,让我担心我的数据安全,其实我是有UPS, 不是在线式的,然后就想如何实现停电自动关机呢? 经过半天的了解,其实群辉支持telnet协议,于是 ...