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. 避免’sudo echo x >’ 时’Permission denied’

    避免’sudo echo x >’ 时’Permission denied’ 甲: 示例sudo echo a > 1.txt-bash: 1.txt: Permission denied ...

  2. 【easy】215. Kth Largest Element in an Array 第K大的数

    class Solution { public: int quicksort(vector<int>& nums, int start, int end, int k){ int ...

  3. 【原创】大叔经验分享(5)oozie提交spark任务如何添加依赖

    spark任务添加依赖的方式: 1 如果是local方式运行,可以通过--jars来添加依赖: 2 如果是yarn方式运行,可以通过spark.yarn.jars来添加依赖: 这两种方式在oozie上 ...

  4. 行为驱动:Cucumber + Selenium + Java(二) - extentreports 测试报告+jenkins持续集成

    1.extentreports 测试报告 pom文件 <dependency> <groupId>com.vimalselvam</groupId> <art ...

  5. Postgresql/Greenplum中将数字转换为字符串TO_CHAR函数前面会多出一个空格

    -- 问题1..Postgresql中将数字转换为字符串前面多出一个空格. SELECT TO_CHAR(, '); -- 解决1.使用如下,参数二前面加上fm就可以去掉空格了,如下: SELECT ...

  6. #Node.js的fs导入遇到的问题和解决方案

    一直在使用VS Code,今天打算用Node.js进行文件IO时候遇到了一些问题,fs是Node.js的核心功能之一,一开始我用Javascript编写fs模块的导入. var fs = requir ...

  7. Cesium 动态更换模型贴图方法

    参考资料 github 讨论地址 示例代码地址 示例代码 var viewer = new Cesium.Viewer('cesiumContainer'); var scene = viewer.s ...

  8. Codeforces 1009G Allowed Letters 最大流转最小割 sosdp

    Allowed Letters 最直观的想法是贪心取, 然后网络流取check可不可行, 然后T了. 想到最大流可以等于最小割, 那么我们状压枚举字符代表的6个点连向汇点是否断掉, 然后再枚举64个本 ...

  9. 提升webpack打包速度

    webpack打包文件体积过大,怎么提升速度? 借助webpack visualizer可视化插件,来看构建的情况.这个问题要具体情况具体分析,看看打包文件有哪些块头比较大,哪些不常改变,最好列一个l ...

  10. struts2的java.lang.NoSuchMethodException错误

    不久前在学习struts时出现这个错误,在网上搜索了半天,发现答案不一.将其总结如下,以方便大家参考. 1. 你有没有试试看 其它的方法能不能用,要是都是这种情况的话,可能是你的Action类没有继承 ...