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. [洛谷3796]【模板】AC自动机(加强版)

    题目大意: 给定$n(n\leq150)$个模式串$p_i(|p_i|\le70)$和一个$t(|t|\le10^6)$,求$t$中被匹配次数最多的$p_i$. 思路: AC自动机.匹配时记录一下匹配 ...

  2. 当ASP.NET Forms验证方式遭遇苹果IOS

    一.问题出现 我在用ASP.NET MVC4做微信开发的时候,用Forms验证方式做为authentication. 一般都是在web.config加: <authentication mode ...

  3. PHP 让__get方法重新执行

    <?php class A { public function __get($p) { echo "getting $p\r\n"; if(isset($this->$ ...

  4. ResourceBundle (读取properties文件及中文乱码解决方法)

    原文:http://blog.csdn.net/joecheungdishuiya/article/details/6304993 public class test { static Resourc ...

  5. 【微信】微信小程序 新建页面目录后,怎么自动生成目中的的四个基本文件呢? 新建目录报错如下VM458:2 未找到 app.json 中的定义的 pages "pages/module/module" 对应的 WXML 文件

    如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件 但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+ ...

  6. C#中out与ref区别

    一.ref(参考)与out区别 1.out(只出不进) 将方法中的参数传递出去,在方法中将该参数传递出去之前需要在该方法起始赋初值:在方法外传递的该参数可以不用赋值: 简单理解就是:将一个东西抛出去之 ...

  7. Unity Dotween build error

    unity这东西感觉挺坑 在mac上build的时候遇到error IL2CPP error for method 'System.Void DG.Tweening.DOTweenPath::DORe ...

  8. Git的微操作

    合并分支代码,简单操作: 1.切换到master主干代码 2.到git repositories 视图,点击需要合并的分支,例如v1.1.9 点击merge 进行合并 3.然后push to Upst ...

  9. Shader toy (顺手写两个Gyro)(纯代码写3D)

    Shader toy (A new world) 1.一个多月了,突然忘记CSDN的password了.由于每次输password的时候都要计算一遍,于是没有计算出来- 2.回头发现都过了半年了,都快 ...

  10. PHP使用mysqli连接MySQL数据库

    使用mysqli函数库连接MySQL,支持面向对象和面向过程两种方式: 1.面向对象的使用方式 建立一个连接 $db = new mysqli('localhost', 'root', '123456 ...