今天看视频学习的时候,发现css有一个 flex 的属性,非常的好用,为了让自己能够熟记,特意来分享一下flex的用法。
首先,采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器一共有有6个属性,分别是flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。其中(justify-content和align-items)结合可以完成不定宽高的水平垂直居中韩国,非常方便简洁。
项目也有6个属性,分别是order、flex-grow、flex-shrink、flex-basis、flex、align-self。
具体例子可以查看[菜鸟教程](http://www.runoob.com/w3cnote/flex-grammar.html)

flex学习的更多相关文章

  1. 【转】【Flex】FLEX 学习网站分享

    [转:http://hi.baidu.com/tanghecaiyu/item/d662fbd7f5fbe02c38f6f764 ] FLEX 学习网站分享 http://blog.minidx.co ...

  2. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  3. CSS3伸缩布局Flex学习笔记

    如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

  4. 【Flex学习】Flex4学习网站

    http://blog.minidx.com/category/flex  来自为知笔记(Wiz)

  5. Flex学习总结

    Flex SDK Flex框架类库.Flex编译环境.调式器.MXML.ActionScript编程语言以及其它工具组成,Flash Builder是其开发环境,   Flash Player的工作模 ...

  6. Flex学习第一天(两个数相加)

    <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="htt ...

  7. Flex学习教程网站地址

    http://www.985school.com/flex/complex_controls.html

  8. flex学习网站地址

    http://hacker47.iteye.com/blog/213887 http://www.cuplayer.com/player/PlayerCode/Flex/ http://bbs.9ri ...

  9. flex学习, 尝试布局一个计算器

    <!DOCTYPE html> <html> <head> <title>flex</title> </head> <st ...

随机推荐

  1. 浅谈Java构造器

    Java构造器 每个类都有构造方法.如果没有显式地为类定义构造方法,Java编译器将会为该类提供一个默认构造方法. 在创建一个对象的时候,至少要调用一个构造方法.构造方法的名称必须与类同名,一个类可以 ...

  2. Nginx知多少系列之(二)安装

    目录 1.前言 2.安装 3.配置文件详解 4.Linux下托管.NET Core项目 5.Linux下.NET Core项目负载均衡 6.Linux下.NET Core项目Nginx+Keepali ...

  3. PHPDocumentor2.8.5 安装,使用及快速上手

    PHPDocumentor当前版本是phpDocumentor-2.8.5.tgz 关于PHPDocumentor有什么用,还有其历史,我就不介绍了,直接进入正题.老版本的叫PHPDoc,从1.0开始 ...

  4. spark模型error java.lang.IllegalArgumentException: Row length is 0

    failure: Lost task 18.3 in stage 17.0 (TID 59784,XXXXX, executor 19): java.lang.IllegalArgumentExcep ...

  5. 配置spark历史服务(spark二)

    1. 编辑spark-defaults.conf位置文件 添加spark.eventLog.enabled和spark.eventLog.dir的配置修改spark.eventLog.dir为我们之前 ...

  6. tf.nn.softmax_cross_entropy_with_logits 分类

    tf.nn.softmax_cross_entropy_with_logits(logits, labels, name=None) 参数: logits:就是神经网络最后一层的输出,如果有batch ...

  7. Java中都通用文件下载(ContentType、文件头、response、out四步骤)

    Java中都通用文件下载(ContentType.文件头.response.out四步骤) 新浪微博:IT国子监(记得关注噢) http://weibo.com/itguozijian   我们就直接 ...

  8. 【Tool】Windows系统安装Maven依赖管理工具

    安装Maven依赖管理工具 官网下载地址:http://maven.apache.org/download.cgi 系统环境要求: [JDK]Maven3.3版本+需要JDK1.7版本以上支持 [内存 ...

  9. [译]使用开发工具来调试 Beta 版 WebView

    自2014年以来,Android WebView 已经作为一个可更新的系统组件铺平了道路,为 Android 应用程序和用户提供了稳定性和性能改进.现代网络平台功能和安全补丁. 然而,更新可能是一把双 ...

  10. 浅谈Vector

    浅谈Vector 在之前的文章中,我们已经说过线程不安全的ArrayList和LinkedList,今天我们来讲讲一个线程安全的列表容器,他就是Vector,他的底层和ArrayList一样使用数组来 ...