经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » CSS » 查看文章
CSS 小结笔记之伸缩布局（flex）
来源：cnblogs　　作者：Assist　　时间：2018/9/25 20:11:03　　对本文有异议
之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。

之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。

flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。

flex相关的各个属性如下：

1、display：flex；在父盒子定义flex，子盒子才能使用flex属性

2、flex：none |flex-grow  flex-shrink  flex-basis  设置子盒子的缩放比例，可以一起指定也可以单独指定。（均不可为负数）

　　（1）none 相当于 flex： 0 0 auto；

　　（2）flex-grow 用来规定盒子的扩展比率，即盒子相对于其他盒子能够分配到的空间的比值，没有指定flex的不参与分配。

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 800px;height: 400px;border: 2px solid red;display: flex;margin: 200px auto;}
  2.         .son1 {background-color: aqua;width: 200px;}
  3.         .son2 {background-color: green;flex-grow: 1;width: 50px;}
  4.         .son3 {background-color: blue;flex-grow: 2;width: 30px;}
  5.         .son4 {background-color: orange;flex-grow: 3;width: 80px;}</style></head><body><div class="fa"><div class="son1">1</div><div class="son2">2</div><div class="son3">3</div><div class="son4">4</div></div></body></html>

View Code

　　　　

　　　　上面图中子盒子所占大小的计算方法为：

　　　　a、.son1 没有指定flex 因此不参与分配大小为固定的200px；

　　　　b、剩下的空间需要减去盒子固有的宽度来继续分配，即可分配空间为

　　　　　　600-50-30-80=440px

　　　　c、指定分配的比率为1:2:3 所以各自能分配到的大小为440*（1/6），440*（2/6），440*（3/6）

　　　　d、最后可得出各个盒子的大小

　　　　　　.son2: 440*（1/6）+50=123.3px

　　　　　　.son3: 440*（2/6）+30=176.7px

　　　　　　.son4: 440*（3/6）+80=300px

　　（3）、flex-shrink 规定盒子收缩率，一般是在子盒子总体大小超过父盒子情况下，确定各个盒子的缩小比例。

　　　　

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 400px;height: 400px;border: 2px solid red;display: flex;margin: 200px auto;}
  2.         .son1 {width: 100px;flex-shrink: 1;background-color: aqua;}
  3.         .son2 {width: 200px;flex-shrink: 2;background-color: orange;}
  4.         .son3 {width: 300px;flex-shrink: 3;background-color: deeppink;}</style></head><body><div class="fa"><div class="son1">1</div><div class="son2">2</div><div class="son3">3</div></div></body></html>

View Code

　　　　

　　　　上面图中子盒子所占大小的计算方法为：

　　　　a、子盒子总体宽度大小为：100+200+300=600px

　　　　b、超过父盒子 600-400=200px

　　　　c、收缩比率为：1:2:3 ，则对收缩大小进行加权求值,求出收缩大小

　　　　　　.son1:  200*[100*1/（1*100+2*200+3*300）]=14px

　　　　　　.son2:  200*[200*2/（1*100+2*200+3*300）]=57px

　　　　　 　.son1:  200*[300*3/（1*100+2*200+3*300）]=129px

　　　　d、最终各个盒子大小为

　　　　　　.son1: 100-14=86px；

　　　　　　.son2: 200-57=143px；

　　　　　　.son3: 300-129=171px；

　　（4）、flex-basis：长度 |百分比

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 超过按照比例划分 */
  2.         .fa {width: 400px;height: 400px;border: 2px solid red;display: flex;margin: 200px auto;}
  3.         .son1 {width: 100px;flex-basis: 35%;background-color: aqua;}
  4.         .son2 {width: 200px;flex-basis: 30%;background-color: orange;}
  5.         .son3 {width: 300px;flex-basis: 50%;background-color: deeppink;}</style></head><body><div class="fa"><div class="son1">1</div><div class="son2">2</div><div class="son3">3</div></div></body></html>

View Code

　　　　

　　　　一般设置不超过盒子大小或者不超过100%，超过100%则按比例分配空间。

　　　　如上图按7:6:10 来分配，设置为auto，则以自身大小来分配。

　　（5）、常用复合属性

　　　　　　flex：1相当于 flex：1 1 0%；

　　　　　　flex：auto 相当于 flex：1 1 auto；

 　　　　　　flex：none 相当于 flex：0 0 auto；

　　　　　　 flex：0 none 或flex：initial  相当于 flex：0 1 auto；

3、flex-direction：row | row-reverse | column | column-reverse 调整株洲方向，即合适是水平分布还是垂直分布的，默认是水平方向。

　　上面四个值分别是，水平| 水平反向| 垂直| 垂直反向 

　　反向的意思是，盒子顺序是相反的。

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 400px;height: 400px;border: 2px solid red;display: flex;margin: 200px auto;flex-direction: column-reverse;}
  2.         .son1 {flex: 1;background-color: aqua;}
  3.         .son2 {flex: 1;background-color: orange;}
  4.         .son3 {flex: 1;background-color: deeppink;}</style></head><body><div class="fa"><div class="son1">1</div><div class="son2">2</div><div class="son3">3</div></div></body></html>

View Code

　　

4、justify-content: flex-start | flex-end | center | space-between | space-around  子盒子在父盒子中的水平对齐方式。　　　

　　flex-start ：默认值，项目向容器起始位置对齐（靠左对齐）

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 400px;height: 200px;border: 1px solid red;display: flex;margin: 100px auto;justify-content: flex-start;}
  2.         .son {flex: 0 0 20%;background-color: aqua;}
  3.         .son:nth-child(2) {background-color: orange;}
  4.         .son:nth-child(3) {background-color: deeppink;}</style></head><body><div class="fa"><div class="son">1</div><div class="son">2</div><div class="son">3</div></div></body></html>

View Code

　　接下来只将justify-content 值改变，就不重复写代码了，只给出结果图

　　　

　　flex-end：项目向容器结束位置对齐。（靠右对齐）

　　

　　center：项目位于容器的中间。（水平居中）　　

　　

　　space-between：各个项目中间有空隙，但是开头和结尾紧贴容器（父盒子）

　　

space-around：各个项目中间有空隙，且空隙距离相同（相当于每个盒子左右给了一个相同的margin值）

　　

5、align-items：flex-start | flex-end | center | baseline | stretch  子盒子在父盒子中的垂直对齐方式

 

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 400px;height: 400px;border: 1px solid red;display: flex;margin: 100px auto;align-items: stretch;}
  2.         .son {flex: 0 0 20%;padding: 30px 0;background-color: aqua;font-size: 40px;}
  3.         .son:nth-child(2) {padding: 50px 0;background-color: orange;}
  4.         .son:nth-child(3) {padding: 100px 0;background-color: deeppink;}</style></head><body><div class="fa"><div class="son">1</div><div class="son">2</div><div class="son">3</div></div></body></html>

View Code

　　

　　同样接下来几种只给出效果图

　　flex-start：上对齐

　　

　　flex-end ：下对齐

　　

　　center：垂直居中对齐

　　

　　baseline：与项目的第一行文字的基线对齐，因此当基线在同一条线上时，与flex-start一致

　　

6、flex-wrap：nowrap | wrap | wrap-reverse  当子盒子大小超过父盒子是是否换行

　　nowrap：默认值，不换行。强行在一行显示，因此每个盒子的大小都会减少。

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 200px;height: 200px;border: 1px solid red;display: flex;margin: 100px auto;align-items: baseline;flex-wrap: nowrap;}
  2.         .son {width: 50px;background-color: aqua;font-size: 40px;}
  3.         .son:nth-child(2) {background-color: orange;}
  4.         .son:nth-child(3) {background-color: deeppink;}
  5.         .son:nth-child(4) {background-color: green;}
  6.         .son:nth-child(5) {background-color: greenyellow;}</style></head><body><div class="fa"><div class="son">1</div><div class="son">2</div><div class="son">3</div><div class="son">4</div><div class="son">5</div><div class="son">6</div></div></body></html>

View Code

　　

　　wrap：换行显示。

　　

　　wrap-reverse：换行且倒着显示

　　

7、flex-flow: flex-direction  flex-wrap;   flex-flow 是flex-direction 和 flex-wrap 的简写，默认值是flex-flow： row wrap

8、align-content：flex-start | flex-end | center | space-between | space-around | stretch  容器中多行的对齐方式

 

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 200px;height: 200px;border: 1px solid red;display: flex;margin: 100px auto;flex-wrap: wrap;align-content: stretch;}
  2.         .son {/* width: 50px; */padding: 10px;background-color: aqua;font-size: 40px;}
  3.         .son:nth-child(2) {background-color: orange;}
  4.         .son:nth-child(3) {background-color: deeppink;}
  5.         .son:nth-child(4) {background-color: green;}
  6.         .son:nth-child(5) {background-color: greenyellow;}</style></head><body><div class="fa"><div class="son">1</div><div class="son">2</div><div class="son">3</div><div class="son">4</div><div class="son">5</div><div class="son">6</div></div></body></html>

View Code

 

　　

　　flex-start：上对齐

　　

　　flex-end：下对齐

　　

 

　　center：居中对齐

　　

　　space-between ：与justify-content中的 space-between类似 最上一行 顶对齐，最下一行 底对齐

　　

　　space-around：与justify-content中的 space-around类似 各个行上下有空隙，且空隙距离相同（相当于每行上下给了一个相同的margin值）

　　

9、order：设置子盒子显示顺序。值取整数，可以为负数，数值越小的排列方向越靠前。

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {width: 200px;height: 200px;border: 1px solid red;display: flex;margin: 100px auto;flex-wrap: wrap;align-content: space-between;}
  2.         .son {/* width: 50px; */padding: 10px;background-color: aqua;font-size: 40px;}
  3.         .son:nth-child(2) {background-color: orange;order: -2;}
  4.         .son:nth-child(3) {background-color: deeppink;}
  5.         .son:nth-child(4) {background-color: green;order: 3;}
  6.         .son:nth-child(5) {order: 2;background-color: greenyellow;}</style></head><body><div class="fa"><div class="son">1</div><div class="son">2</div><div class="son">3</div><div class="son">4</div><div class="son">5</div><div class="son">6</div></div></body></html>

View Code

　　

注意事项：

上述的9个属性，其中1、3、4、5、6、7、8是放在容器（父盒子）的属性

而2、9是项目(子盒子)的属性

　　

　　

　　

　　

　　

 

　　　　

　　　　

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号