今天看视频学习的时候,发现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. 1023 Have Fun with Numbers (20 分)

    1023 Have Fun with Numbers (20 分)   Notice that the number 123456789 is a 9-digit number consisting ...

  2. qW3xT.2,解决挖矿病毒

    在阿里云使用redis,开启了6379端口,但是当时并没有对redis的密码进行设置. 在晚上一点左右.阿里云给我发短信,告诉我服务器出现紧急安全事件.建议登录云盾-态势感知控制台查看详情和处理. 于 ...

  3. HDU1074:Doing Homework(状压DP)

    Doing Homework Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  4. Spring (六):整合Mybatis

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...

  5. Hadoop(二)搭建Hadoop

    0.部署计划 本文使用的版本是 red hat 6.8 -本来想用Centos7搭建的,但是工作需要还是换成这个了,不用红帽子用Centos 6系列的应该也可以 JDK 1.8 Hadoop 2.7. ...

  6. 使用StopWatch类来计时 (perf4j-0.9.16.jar 包里的类)

    public class StopWatch { static public int AN_HOUR = 60 * 60 * 1000; static public int A_MINUTE = 60 ...

  7. Linux终端命令格式

    01.终端命令格式 command [-options] [parameter] 说明: command:命令名,响应功能的英文单词或单词的缩写 [-options]:选项,可用来对命令进行控制,也可 ...

  8. 常用vscode 插件第一季

    VSCODE 常用插件第一季 1.chinese 此插件中文(简体)语言包为 VS Code 提供本地化界面. https://marketplace.visualstudio.com/items?i ...

  9. Matlab学习-(3)

    1. 二维图 绘制完图形以后,可能还需要对图形进行一些辅助操作,以使图形意义更加明确,可读性更强. 1.1 图形标注 title(’图形名称’) (都放在单引号内)xlabel(’x轴说明’)ylab ...

  10. 5. history

    https://developer.mozilla.org/zh-CN/docs/Web/API/History_API Browser History APIs