今天看视频学习的时候,发现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. C#通用类库整理--日志记录

    日志的记录是将程序过程中的一些行为数据记录下来,方便开发.运维迅速的找到问题的所在,节省时间.使用时在 站点的web.config 中的<appSettings></appSetti ...

  2. 荐书在精不在多,推荐一份夯实Java基础的必备书单!

    文/黄小斜 转载请注明出处 head first Java 推荐指数:⭐️⭐️⭐️⭐️⭐️ 推荐理由: 说实话,这本书和其他的我Java类型书籍真的大不相同,它不会一本正经地去说技术概念和原理,而是通 ...

  3. JAVA自动化之Junit单元测试框架详解

    一.JUnit概述&配置 1.Junit是什么? Junit是一个Java 编程语言的开源测试框架,用于编写和运行测试.官网 地址:https://junit.org/junit4/ 2.Ma ...

  4. 我对KMP算法的理解

    KMP算法的核心在于失配回溯表——pnext,相比于通过逐个比较来匹配字符串的朴素算法,KMP通过对模式串的分析,可以做到比较指针在主串上不回溯,一直向前. 1. KMP如何实现不回溯? 对于主串 t ...

  5. lr事务

    事务:transaction(性能里面的定义:客户机对服务器发送请求,服务器做出反应的过程) 用于模拟用户的一个相对完整的业务操作过程:如登录,查询,交易等操作(每次http请求不会用来作为一个事务) ...

  6. Linux c++ vim环境搭建系列(2)——Ubuntu18.04.4编译安装llvm clang

    2. 源码编译安装llvm clang 参考网址: https://llvhttps

  7. std::string::substr函数

    string substr (size_t pos = 0, size_t len = npos) const;

  8. CSS盒模型属性详细介绍

    一.概述 CSS盒模型是定义元素周围的间隔.尺寸.外边距.边框以及文本内容和边框之间内边距的一组属性的集合. 示例代码: <!DOCTYPE html> <html lang=&qu ...

  9. 02-css3之2D转换

    一.CSS3 -2D转换 转换(transform)可以实现元素的位移.旋转.缩放等效果.可以理解为变形. 1. 2D转换之移动translate 可以改变元素的页面中的位置,类似于定位. 1.1语法 ...

  10. Davor COCI 2018

    当题目中有多组解,但要某值最大,该怎么办? 本文为博客园ShyButHandsome的原创作品,转载请注明出处 题目描述 After successfully conquering the South ...