flex布局

  • 简介
  • 容器
  • 项目
  • 新版本新增
  • flex简写属性

简介

CSS flex 弹性盒子是一种用在页面上布置元素的布局模式，它是响应式的，分为新老两个版本，老的叫做box，新的叫做flex，我将从新老两个版本进行flex的介绍：

在开始之前，我们必须先知道几个概念，什么是容器？什么是项目？什么是主轴和侧轴？
容器：就是用于外层包括的元素，就是设置display:flex的元素
项目：容器里面的就是一个一个的项目
主轴：默认水平方向，项目永远排列在主轴的正方向上(从左往右),可以自行设置
侧轴：主轴确定之后，垂直于主轴就是侧轴，同样可以设置

我们都知道新版本的flex要比老版本的flex强大得多，有没有必要学习老版本的flex?
我觉得移动端开发者必须要关注老版本的flex，因为很多移动端设备内核只支持老版本的flex

容器

  1. 容器的布局方向
    容器的布局方向控制的是主轴是哪一根
    box中我们使用属性 -webkit-box-orient,它有两个值，分别是horizontal水平方向和vertical垂直方向
    flex中我们使用属性 flex-direction,它也有两个值，分别是row行和column列
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: -webkit-box;/* 控制主轴是哪一根 */-webkit-box-orient: vertical;}#wrap>.item{width: 50px;height: 50px;background: pink;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;/* 控制主轴是哪一根 */flex-direction: column;}#wrap>.item{width: 50px;height: 50px;background: pink;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
  1. 容器的排列方向
    容器的排列方向控制的就是主轴的方向
    在box中我们使用-webkit-box-direction
    normal 从左往右(正方向)
    reverse 从右往左(反方向)
    在flex中我们还是使用flex-direction,也就是在flex中flex-direction控制主轴的位置和方向
    row 从左往右的X轴
    row-reverse 从右往左的X轴
    column 从上到下的Y轴
    colume-reverse 从下到上的Y轴
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: -webkit-box;/* 控制主轴是哪一根 */-webkit-box-orient: horizontal;/* 控制主轴方向 */-webkit-box-direction: reverse;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;/* 控制主轴是哪一根 以及主轴的方向*/flex-direction: row-reverse;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
  1. 富裕空间管理
    我们先得知道什么是富裕空间，专业的介绍我就不说了，就是项目之外容器中剩下的空间

    我涂的全是富裕空间
    这些富裕空间的管理分为两种：
    a. 主轴上的富裕空间管理

box中使用-webkit-box-pack
主轴是X轴
start 在右边
end 在左边
center 在两边
justify 在项目之间
主轴是Y轴
start 在下边
end 在上边
center 在两边
justify 在项目之间

flex中使用justify-content
flex-start 在主轴的正方向
flex-end 在主轴的反方向
center 在两边
space-between 在项目之间
space-around 在项目两边

b. 侧轴上的富裕空间管理

box中使用-webkit-box-align
侧轴是X轴
start 在右边
end 在左边
center 在两边
侧轴是Y轴
start 在下边
end 在上边
center 在两边

flex中使用align-items
flex-start 在侧轴的正方向
flex-end 在侧轴的反方向
center 在两边
baseline 按基线对齐
stretch 等高布局(没有高度才有用)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: -webkit-box;/* 控制主轴是哪一根 */-webkit-box-orient: horizontal;/* 控制主轴方向 */-webkit-box-direction: normal;/* 富裕空间管理 *//* start   富裕空间在右边end     富裕空间在左边center  富裕空间在两边justify 富裕空间在项目之间*/-webkit-box-pack: justify;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;/* 控制主轴是哪一根 以及主轴的方向*/flex-direction: row-reverse;/* 富裕空间管理 *//* flex-start 富裕空间在主轴的正方向上flex-end   富裕空间在主轴的反方向上center     富裕空间在两边space-between 富裕空间在项目之间space-around(box没有的) 富裕空间在项目两边*/justify-content: space-around;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>

项目

项目中我们需要知道的是弹性空间管理，我们上面提到的富裕空间管理，只决定富裕空间的位置，不会给项目去分配空间，而弹性不一样，弹性就是把富裕的空间按照一定规则分配到各个项目上
我们需要提到一个项目上的属性名称叫做弹性因子，你可以理解为占的比例，富裕空间平分成所有项目的弹性因子的总和份，然后在按照各个项目的弹性因子大小分配给其相应的大小

这里给出计算的过程，大家可以自行以下面的例子来验证:
可用空间 = (容器大小 - 所有相邻项目的flex-basis总和)
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
每项伸缩大小 = (伸缩基准值 + (可扩展空间*flex-grow值))

flex-basis叫做伸缩基准值，不设置的话就是width或者height，默认值是auto

在box中，我们使用-webkit-box-flex来规定弹性因子的大小
flex中使用felx-grow

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: -webkit-box;/* 控制主轴是哪一根 */-webkit-box-orient: horizontal;/* 控制主轴方向 */-webkit-box-direction: normal;/* 富裕空间管理(主轴) *//* start   富裕空间在右边end     富裕空间在左边center  富裕空间在两边justify 富裕空间在项目之间*/-webkit-box-pack: start;/* 富裕空间管理(侧轴) *//* start   end     center  */-webkit-box-align: start;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;/* 弹性空间管理 *//* 定义：将主轴上的富裕空间按比例分配到width上 *//* 指定弹性因子 每一个都为1，一个五个为5，富裕空间50px，故每个width增加10px，变成60px */-webkit-box-flex: 1;}#wrap>.item:nth-child(1){/* 第一个宽80px，其他的55px */-webkit-box-flex: 6;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;flex-direction: row-reverse;justify-content: space-around;align-items: flex-start;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;/* 弹性空间管理 */flex-grow: 1;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>

新版本新增

相比于老版本box，新版flex新增了很多属性，我们一一介绍

  1. 容器新增

flex-wrap:控制的是侧轴的方向
nowrap 不换行
wrap 侧轴方向由上而下 (flex-shrink失效)
wrap-reverse 侧轴方向由下而上 (flex-shrink失效)

align-content:多行/列时，侧轴上富裕空间的管理(将多行/列看成一个整体)

flex-flow：flex-direction和flex-wrap的简写属性
本质上控制了主轴及侧轴的位置和方向

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 100px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;/* flex-direction: row; */justify-content: flex-start;/* 单行单列时侧轴上的富裕空间管理 */align-items: flex-start;/* 控制侧轴的方向,新行/列将沿侧轴方向堆砌 *//* flex-wrap: wrap; *//* 多行多列时的富裕空间管理 会把多行多列看成一个整体 */align-content: flex-start;/* flex-direction和flex-wrap的简写，控制主轴及侧轴的方向和位置 */flex-flow: row wrap; }#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
  1. 项目新增

order：控制项目的排列顺序
align-self：项目自身富裕空间的管理
flex-shrink:收缩因子(默认值为1)
当一行宽度不够时，项目将会收缩
这里给出收缩时的计算规则:
–计算收缩因子与基准值乘的总和
var a = 每一项flex-shrinkflex-basis之和
–计算收缩因数
收缩因数 = (项目的收缩因子项目基准值)/第一步计算总和
var b = (flex-shrink*flex-basis)/a
–移除空间的计算
移除空间 = 项目收缩因数 * -溢出空间
var c = b * -溢出空间
还是比较复杂的，所以下面例子中我给出了详细的计算
注意，这只是其中的一种计算方式，还有一种情况就是每个项目收缩到小于它里面的内容所占的大小了，这就不能再收缩了，这时它会将其收缩到内容大小，多余没收缩的交给其他项目承担，这实质上一个递归的过程，可复杂了，感兴趣的，大家看看API吧，一般我们做项目的时候会注意项目里的内容进行相应的设计

flex-basis:伸缩规则计算的基准值(默认width或者height的值)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;flex-flow: row nowrap; justify-content: flex-start;align-items: flex-start;align-content: flex-start;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;}/* order越大，越往后排 */#wrap>.item:nth-child(1){order: 3;/* 管理单个项目自己的富裕空间 */align-self: flex-end;}#wrap>.item:nth-child(2){order: 2;}#wrap>.item:nth-child(3){order: 4;}#wrap>.item:nth-child(4){order: 5;}#wrap>.item:nth-child(5){order: 1;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;flex-flow: row nowrap; justify-content: flex-start;align-items: flex-start;align-content: flex-start;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;flex-basis: 100;flex-grow: 1;/* flex-basis  伸缩基准值 *//* 扩展因子 flex-grow的算法 可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)  没有flex-basis时默认为宽度300 - 100*5 = -200可扩展空间 = (可用空间 / 所有相邻项目flex-grow的总和)-200/5 = -40每项伸缩大小 = (伸缩基准值  + (可扩展空间*flex-grow的值))100 + (-40)*1 = 60*/}#wrap>.item:nth-child(1){order: 3;}#wrap>.item:nth-child(2){order: 2;}#wrap>.item:nth-child(3){order: 4;}#wrap>.item:nth-child(4){order: 5;}#wrap>.item:nth-child(5){order: 1;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* *flex容器*flex项目*主轴*侧轴*项目永远在主轴的正方向上排列*/*{margin: 0;padding: 0;}#wrap{width: 100px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;flex-flow: row nowrap; justify-content: flex-start;align-items: flex-start;align-content: flex-start;}#wrap>.item{width: 50px;height: 50px;background: pink;text-align: center;line-height: 50px;flex-shrink: 1;/* flex-shrink 收缩因子 只有一行时有效 默认值为1 *//* 收缩的算法1. 计算收缩因子与基准值乘的总和1*20+50*4 = 2202. 计算收缩因数收缩因数 = (项目的收缩因子*项目基准值)/第一步计算总和1*20/220 = 1/111*50/220 = 5/223. 移除空间的计算移除空间 = 项目收缩因数 * -溢出空间  1/11*-(20+50*4-100) = -10.几5/22*-(120) = -27.几20 - 10.几 = 9.几50 - 27.几 = 22.几*/}#wrap>.item:nth-child(1){order: 3;width: 20px;}#wrap>.item:nth-child(2){order: 2;}#wrap>.item:nth-child(3){order: 4;}#wrap>.item:nth-child(4){order: 5;}#wrap>.item:nth-child(5){order: 1;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></body>
</html>

看到这里了，我们发现侧轴上的富裕空间管理，有好几个，align-items,align-self,align-content,下面说说他们的区别：
align-items 单行单列
align-self 自身
align-content 多行多列

优先级:align-content > align-self > align-items

flex简写属性

在介绍简写属性之前，我们看一个flex的应用，等分布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 300px;height: 400px;border: 1px solid;margin: 100px auto;display: flex;}#wrap>.item{height: 50px;background: pink;/* 等分布局 *//* 宽度靠内容撑开，基准值设为0 ，因子设为1，相当于平分成5份 */flex-grow: 1;flex-basis: 0;flex-shrink: 1;}</style></head><body><div id="wrap"><div class="item">1</div><div class="item">22</div><div class="item">333</div><div class="item">4444</div><div class="item">55555</div></div></body>
</html>

至于为什么是等分，大家按照上面的计算规则算一下就知道了
简写属性就是等分布局的简写，上面的三行可以简写成
flex: 1
表示 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
这就是一个等分布局

好了，我的分享就到这里了，谢谢大家

flex弹弹弹性布局相关推荐

  1. display:flex 意思是弹性布局

    转载: http://www.cnblogs.com/manman04/p/5704660.html display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列 ...

  2. CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距

    场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局 最外层是是一个div,div里面是 ...

  3. Flex 弹性布局(****************************************************)

    多行自适应,多列自适应,间隔也能自适应,任意对齐 创建弹性容器  flex container display: block | inline  | inline-block  | none | fl ...

  4. (二)弹性布局Flex

    弹性布局Flex 本周在逆战班学习了布局方面的知识,作为前端开发布局是最关键的,此文章用来写自己对弹性布局知识点的理解,和想法, 弹性布局分为两部分父元素和子元素,在父元素上设置弹性布局而控制子元素 ...

  5. 前端~css~Chrome调试工具、元素显示模式、盒模型、flex弹性布局

    文章目录 Chrome调试工具 块级元素 行内元素 盒模型 flex布局(弹性布局) 常用属性 Chrome调试工具 在浏览器任何一个网页中,鼠标右键单击,选择检查,可打开调试工具.或者f12键. 打 ...

  6. html5 弹性布局

    html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息 1.width=device-width: 设置Viewport视口宽度等于设备宽度 2.in ...

  7. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  8. bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

    轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...

  9. 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

    移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...

最新文章

  1. cqueue结构pop_c++ stl栈容器stack的pop(),push()等用法介绍及头文件
  2. Zend Studio添加ThinkPHP代码提示方法
  3. python.freelycode.com-每一个人都需要的Python类库
  4. Linux文字分段裁剪命令cut（转）
  5. 高级C语言教程-作用域
  6. python区域增长_Python – 有效地为高密度区域创建密度图,稀疏区域的点
  7. MapReduce 示例：减少 Hadoop MapReduce 中的侧连接
  8. 标题: ZZ- Linux 系统裁减指南(LiPS)
  9. OkHttp Interceptors（二）
  10. 数据库-创建数据库-创建数据表
  11. matlab求取状态方程的传递函数并实现系统解耦
  12. Requirement already satisfied:
  13. 深入浅出实时数据库12.8日版
  14. javaScript高级[二]
  15. OSI七层模型的功能及协议
  16. HTTP/2协议详细介绍
  17. “有些委屈如果要一辈子背在身上，那我宁愿犯法。任何事情，你要给我一个说法，你不给我一个说法，我就给你一个说法。”
  18. Numpy和spicy函数复习1
  19. Python爬虫核心知识-第二章：2.2 爬虫urllib.parse模块
  20. 【vue双向绑定原理浅析】

热门文章

  1. Istio 1.1安装部署实践
  2. nginx 过滤post报文 防火墙_前端开发必备的Nginx知识（值得收藏）
  3. 湖北民族学院2015CSDN俱乐部招新
  4. 【BDTC2016】D-uni FounderCEO查理：数据敏捷性，数据时代的云架构
  5. 过度设计会扼杀你的产品
  6. 一个前端的2018总结，2019展望 | 掘金年度征文
  7. 电影《赵氏孤儿》之我观
  8. chatgpt赋能Python-pandas_错位相减
  9. NAT模式详解（进阶篇）
  10. java换行符在windows和linux下区别