display:flex:规定元素是flex布局,里面的元素自然会像浮动一样横向排列;

flex-direction:row | row-reverse | column | column-reverse;规定子元素是横向排列还是纵向排列;

flex-wrap: nowrap | wrap | wrap-reserve;规定子元素的宽度超过父元素时,换行还是不换行,或则是反向换行;

flex-flow:row wrap;也可以同时规定子元素的排列方向和是否换行;

子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式(同样是在父元素上设置):

规定子元素在指定排列方向上的分布方式:分别代表 左浮动效果、右浮动效果、居中、贴边间距相等、不贴边间距相等;

justify-content: flex-start | flex-end | center | space-between | space-around;

额外说一下justify-content:space-around;代表第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半,中间的元素等分间距。也就是每个子元素两边的margin是一样的;

以下是在子元素上设置的:

子元素的尺寸确定之后,用此属性来设置在父元素上flex-direction(定义方向)上的(垂直)方向的分布方式:

align-items:flex-start | flex-end | center | baseline | stretch;

以上分别代表在定义排列方向的垂直方向:顶部对齐、底部对齐、居中对齐、子元素内文字底部对齐、子元素高度拉伸和父元素一样高;

设置多行子元素在行方向上的对齐方式:

align-content : flex-start | flex-end | center | space-between  | space-around | stretch;

分别代表:多行整体靠上排列、 多行整体靠下排列、多行整体居中排列、第一行子元素靠上顶格,最后一行子元素靠下顶格,中间行子元素等分垂直的间距、同理、同理;

条目属性:(也是在子元素上设置)

flex-grow:number;表示当父元素又多余的空间时,这些空间在不同子元素质检的分配比例

flex-shrink:number;当父元素的空间不足时,各个子元素的尺寸缩小的比例

align-self:auto | flex-start | flex-end |center|baseline|stretch;覆写父元素指定的对齐方式。

看各个样式的效果图,请看这个连接:链接

flex总结一下的更多相关文章

  1. OpenCASCADE Expression Interpreter by Flex & Bison

    OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...

  2. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  3. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  4. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  5. Flexible 弹性盒子模型之flex

    实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...

  6. 信息系统实践手记6-JS调用Flex的性能问题一例

    说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统 ...

  7. flex自适应高度内容高度超出容器高度自动出现滚动条的问题

    在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...

  8. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  9. flex学习小结

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

  10. flex实验总结

    1.父元素 .box{ display:flex; flex-direction: column;//铺满垂直排列 flex-direction: column-reverse;//铺满垂直反向排列 ...

随机推荐

  1. Mysql基本架构及查询流程

    mysql体系结构简单概述: Connectors:接入方,支持协议很多 Management Serveices & Utilities:系统管理和控制工具例如:备份恢复,mysql复制集群 ...

  2. VS2010 集成标准com组件

    #include <Windows.h> #include <stdio.h> // import后,会提示找不到对应的SignCtrl.tlh文件,只需要对项目重新编译一下, ...

  3. DOS批处理高级教程(还不错)(转)

    前言 目录 第二节 常用特殊符号     1.@  命令行回显屏蔽符     2.%  批处理变量引导符     3.>   输出重定向符     4.>>  输出重定向符     ...

  4. 剑指offer数组3

    面试题11:旋转数组的最小数字 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2 ...

  5. Autofac 依赖注入框架 使用

    简介 Autofac是一款IOC框架,比较于其他的IOC框架,如Spring.NET,Unity,Castle等等所包含的,它很轻量级性能上非常高. 官方网站http://autofac.org/ 源 ...

  6. SSL双向认证和SSL单向认证的流程和区别

    refs: SSL双向认证和SSL单向认证的区别https://www.jianshu.com/p/fb5fe0165ef2 图解 https 单向认证和双向认证!https://cloud.tenc ...

  7. Scrapy Selectors 选择器

    0. 1.参考 <用Python写网络爬虫>——2.2 三种网页抓取方法  re / lxml / BeautifulSoup 需要注意的是,lxml在内部实现中,实际上是将CSS选择器转 ...

  8. 想对list里面的对象进行排序

    不必使用排序算法.实现Comparator接口就行

  9. js事件循环机制 (Event Loop)

    一.JavaScript是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决 ...

  10. Android SQL数据库应用实践 “问题点”“疑难点”“解析”

    应用 Android SQL 数据库时,遇到的问题: 场景1:Android SQL查询后,获取到Cursor并查询数据:遇到以下问题:"android.database.CursorInd ...