今天看视频学习的时候，发现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. MFC之使用blat发送邮件

    blat的下载地址:http://www.blat.net 我用它进行了smtp服务的邮件发送.这里我使用的qq邮箱,qq邮箱使用的密码是授权码,可以再qq邮箱设置里面开启smtp服务.下载下来是文件 ...

  2. 解决MySQL workbench的resultgird不出现的问题

    23:01:37 2019-08-08 鸽了好久 终于开始看怎么使用MySQL workbench了 首先就是遇到了result gird不显示的问题 搜了 重启是一种办法(这方法...至少能用) 其 ...

  3. Shell脚本的编写及测试

                                                      Shell脚本的编写及测试 1.1问题 本例要求两个简单的Shell脚本程序,任务目标如下: 编写一 ...

  4. python--Django（三）视图

    Django的视图 不同于其他语言的MVC模式,Django采用的是MVT模式,即Model.View.Template,这里的View其实质就是其他语言中的Controller(emmm.....) ...

  5. matplotlib 显示最后n条数据（可用于实时更新）

    2020-04-16 14:05:01 --Edit by yangray 按横轴刻度的种类不同,分为数值类刻度和日期类刻度. 数值类刻度 需求:x轴数据间隔为2,显示最后24条数据. #!/usr/ ...

  6. Linux C++ 网络编程学习系列（2）——多路IO之select实现

    select实现多路IO 源码地址:https://github.com/whuwzp/linuxc/tree/master/select 源码说明: server.cpp: 监听127.1:6666 ...

  7. CentOS 配置OOM监控报警

    由于程序设计不合理或者瞬间高并发访问时,很有可能会触发OOM(Out of memory),这里指的是操作系统级别的OOM.具体什么是OOM,以及怎样发生这里不在赘述,因为笔者认为这是IT从业工作者的 ...

  8. 【论文笔记】张航和李沐等提出：ResNeSt: Split-Attention Networks（ResNet改进版本）

    github地址:https://github.com/zhanghang1989/ResNeSt 论文地址:https://hangzhang.org/files/resnest.pdf 核心就是: ...

  9. Julia基础语法复数和分数

     1.复数   2.分数

  10. python在办公时能给我们带来什么？

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:谦睿科技教育 PS:如有需要Python学习资料的小伙伴可以加点击下方 ...