flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left;

比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置float属性,如果没有设置高度,那么容器会脱离文档流,需要清除浮动,才可以根据项目的高度规定高度。

父元素称之为容器,子元素称之为项目

水平的方向叫主轴, 水平和垂直交叉点,称之为交叉轴

flex中如果子元素中的总宽度不超过父级,那么就正常排列,

flex中如果子元素中的总宽度超过父元素,那么就按照父级的宽度均分,而且不受边框和内边距的影响
下面是代码,设置了display:flex,容器中的项目则自动左浮动,且ul没有设置高度,

效果

flex-direction 改属性决定了项目(即子元素)排列的方向

row(默认值)水平方向左以左边为起点排列

row-reverse 水平方向以右边终点为起点排列

代码

效果

column 垂直方向,起点在左上角

代码

效果

column-reverse 垂直方向,起点在下边,类似于把子元素翻转了

代码

效果

flex-wrap:wrap 设置了该属性,如果子元素的宽度超出了父元素的宽度,则会换行

上面说了设置了dispay:flex,flex中如果子元素中的总宽度不超过父级,那么就正常排列(按照实际像素排列),

flex中如果子元素中的总宽度超过父元素,那么就按照父级的宽度(按百分比)均分,而且不受边框和内边距的影响
 
我们有时候想即使子元素的宽度超过了父元素的宽度,想让子元素不按照百分比,按照实际像素换行,那么我们可以设置flex-wrap;wrap
 下面的子元素的总宽度明显超出了父元素的总宽度,超出则按照父元素宽度的百分比排列,子元素的实际宽度失效。

效果

那么我想让子元素的宽度即使超出了父元素的宽度,不需要按照百分比,则是按照子元素的实际宽度排列,我们这里可以设置flex-wrap:wrap属性就可以

效果如下

可以看出设置了flex-wrap:wrap,子元素的宽度超出了父元素的宽度,就按照子元素的实际宽度排列,就会换行。

flex弹性盒模型的更多相关文章

  1. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  5. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  6. box flex 弹性盒模型(转载)

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  7. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

  8. Flex弹性盒模型(新老版本完整)--移动端开发整理笔记(二)

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

  9. flex 弹性盒模型的一些例子;

    1.垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. 集合框架(06)Arrays

    Arrays Arrays:用于操作数组的工具类,里面都是静态方法 ---数组变集合 1.asList:将数组变成List集合 把数组变成list集合的好处?可以使用集合的思想和方法来操作数组中的元素 ...

  2. Sql Server中百万级数据的查询优化

    原文:Sql Server中百万级数据的查询优化 万级别的数据真的算不上什么大数据,但是这个档的数据确实考核了普通的查询语句的性能,不同的书写方法有着千差万别的性能,都在这个级别中显现出来了,它不仅考 ...

  3. Debian 安装Linux源码

    参考: http://blog.chinaunix.net/uid-20683355-id-1895778.html http://www.linuxdiyf.com/viewarticle.php? ...

  4. react数组key的唯一性

    1.不要使用数组的index索引作为key 2.在相邻的元素间,一定确保key的唯一性,如果出现了相同的 key,会抛出一个 Warning,告诉相邻组件间有重复的 key 值.并且只会渲染第一个重复 ...

  5. 记一次有惊无险的Linux数据恢复过程

    问题阶段 起因: 昨天晚上思路不是很清晰(上了一天班回来有点蒙),还是强忍着疲惫想搞事情,结果悲剧了… … 本来想拿SD卡做一张linux烧录卡,烧录脚本是很久以前写的,有git记录,一直不成功,就回 ...

  6. 基于Redis的Bloomfilter去重(转载)

    转载:http://blog.csdn.net/bone_ace/article/details/53107018 前言 “去重”是日常工作中会经常用到的一项技能,在爬虫领域更是常用,并且规模一般都比 ...

  7. 让Mac支持lrzsz

    http://blog.csdn.net/citywolf4/article/details/49071679 https://github.com/mmastrac/iterm2-zmodem

  8. 最简单的基于FFmpeg的移动端样例:IOS 视频解码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  9. Angular 学习笔记——ng-repeat&filter

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  10. 单一按钮显示/隐藏&&提示框效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...