经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » Flex » 查看文章
CSS弹性布局FLEX,媒体查询及移动端点击事件的实现_CSS教程_CSS
来源：jb51　　时间：2021/3/1 8:40:10　　对本文有异议

flex弹性布局

定义： Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目

容器默认存在两根轴：水平的主轴（ main axis ）和垂直的交叉轴（ cross axis ）。

主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。

弹性布局如何使用：只需要给容器设置 display:flex

容器属性

  1.  .box
  2.  { 
  3. flex-direction: row | row-reverse | column | column-reverse;
  4. }
  1. row
  2. row-reverse
  3. column
  4. column-reverse
  1. <style>
  2.     ul:nth-of-type(1){ flex-direction:row;}
  3.     ul:nth-of-type(2){ flex-direction:row-reverse;}
  4.     ul:nth-of-type(3){ flex-direction:column;}
  5.     ul:nth-of-type(4){ flex-direction:column-reverse;}
  6. </style>

 

  1. .box 
  2. { 
  3. flex-wrap : nowrap| wrap | wrap-reverse ;
  4. }
  1. nowrap
  2. wrap
  3. wrap-reverse
  1. <style>
  2.     ul:nth-of-type(1){flex-wrap:nowrap;}
  3.     ul:nth-of-type(2){flex-wrap:wrap;}
  4.     ul:nth-of-type(3){flex-wrap:wrap-reverse;}
  5. </style>

 

  1. .box 
  2. {
  3. justify-content: flex-start | flex-end | center | space-between | space-around;
  4. }
  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around
  1. <style>
  2.     ul:nth-of-type(1){justify-content:flex-start;}
  3.     ul:nth-of-type(2){justify-content:flex-end;}
  4.     ul:nth-of-type(3){justify-content:center;}
  5.     ul:nth-of-type(4){justify-content:space-between;}
  6.     ul:nth-of-type(5){justify-content:space-around;}
  7. </style>

.box {  align-items: flex-start | flex-end | center | baseline | stretch;}

  1. flex-start
  2. flex-end
  3. center
  4. baseline
  5. stretch
  1. <style>
  2.     ul:nth-of-type(1){align-items:flex-start;}
  3.     ul:nth-of-type(2){align-items:flex-end;}
  4.     ul:nth-of-type(3){align-items:center;}
  5.     ul:nth-of-type(4){align-items:baseline;}
  6.     ul li{ height:auto;}
  7.     ul:nth-of-type(5){align-items:stretch;}
  8. </style>

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around
  6. stretch
  1. <style>
  2.     ul:nth-of-type(1){ flex-wrap:wrap; align-content:flex-start;}
  3.     ul:nth-of-type(2){ flex-wrap:wrap; align-content:flex-end;}
  4.     ul:nth-of-type(3){ flex-wrap:wrap; align-content:center;justify-content:center;}
  5.     ul:nth-of-type(4){ flex-wrap:wrap; align-content:space-between;}
  6.     ul:nth-of-type(5){ flex-wrap:wrap; align-content:space-around;}
  7.     ul li{ height:auto;}
  8.     ul:nth-of-type(6){ flex-wrap:wrap;align-content: stretch; justify-content:center;}
  9. </style>

简写方式：

flex-flow :

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。 .

box {flex-flow: <flex-direction> || <flex-wrap>;}

项目属性

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。

.item {order: <integer>;}

  1. <style>
  2.     ul li:nth-of-type(3){order:1;}
  3.     ul li:nth-of-type(2){order:2;}
  4.     ul li:nth-of-type(1){order:3;}
  5.     ul li:nth-of-type(5){order:4;}
  6.     ul li:nth-of-type(4){order:5;}
  7. </style>

flex-grow 属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大。 如果所有项目的 flex-grow 属性都为 1 ，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2 ，其他项目都为 1 ，则前者占据的剩余空间将比其他项多一倍。

.item { flex-grow: <number>; /* default 0 */}

  1. <style>
  2.     ul li:nth-of-type(1){ flex-grow:1;}
  3.     ul li:nth-of-type(2){ flex-grow:1;}
  4. </style>

flex-shrink 属性定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小。

如果所有项目的 flex-shrink 属性都为 1 ，当空间不足时，都将等比例缩小。

如果一个项目的 flex-shrink 属性为 0 ，其他项目都为 1 ，则空间不足时，前者不缩小。

负值对该属性无效。

.item {  flex-shrink: <number>; /* default 1 */}

  1. <style>
  2.     ul li:nth-of-type(1){flex-shrink:0;}
  3.     ul li:nth-of-type(2){flex-shrink:1;}
  4.     ul li:nth-of-type(3){flex-shrink:2;}
  5.     ul li:nth-of-type(4){flex-shrink:3;}
  6. </style>

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（ main size ）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。它可以设为跟width或height属性一样的值（比如 350px ），则项目将占据固定空间。

.item {  flex-basis: <length> | auto; /* default auto */}

  1. <style>
  2.     ul li:nth-of-type(1){ flex-basis:50%;}
  3. </style>

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

  1. <style>
  2.     ul{align-items:flex-start;}
  3.     ul li{height: auto}
  4.     ul li:nth-of-type(1){ align-self:auto;}
  5.     ul li:nth-of-type(2){ align-self:flex-start;}
  6.     ul li:nth-of-type(3){ align-self:center; }
  7.     ul li:nth-of-type(4){ align-self:flex-end;}
  8.     ul li:nth-of-type(5){ align-self:baseline;line-height: 80px;}
  9.     ul li:nth-of-type(6){ align-self:stretch;}
  10. </style>

flex 属性

flex 属性是 flex-grow ,  flex-shrink  和  flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

该属性有两个快捷值： auto (1 1 auto) 和 none (0 0 auto) 。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

媒体查询

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title></title>
  6. </head>
  7.  
  8. <body>
  9. </body>
  10. <script type="text/javascript">
  11. /*
  12. viewport
  13. 定义：viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,css中的1px并不等于设备的1px：因为像素密度不同
  14.     layout viewport：布局视口
  15.     一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的layout viewport，用于解决早期页面手机上显示的问题
  16.     visual viewport ：可视视口
  17.     设置物理屏幕的可视区域，屏幕显示的物理像素，同样的屏幕，像素密度大的设备，可现实的像素会更多
  18.     ideal viewport   ：理想视口
  19.     通过metab标签来得到理想视口
  20.     示例：<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
  21.  
  22. * 移动端布局
  23.     * meta标签的content属性的值
  24.     * width=device-width,height=device-height,让当前的viewport宽度，高度等于设备的宽度，高度，也可以设置一个固定的值，尽量不使用height
  25.     * initial-scale=1.0;初始化缩放比例：0.25-1.0
  26.     * maximum-sacle=1.0;设置最大缩放比例：0.25-1.0
  27.     * minimum-scale=1.0;设置最小缩比例：0.25-1.0
  28.     * user-scalable=no;是否允许用户缩放，默认为yes,如果设置为no:那么minimax-scale,与maximum-scale将被忽略，因为不允许缩放
  29.     * 实例:
  30.     * <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  31.  
  32. * 移动端手势事件
  33.     * 与pc端事件差异对比
  34.     * pc端的mousemove,mouseup,mousedown，在移动端会失效或者不正常
  35.     * pc端的click事件可以使用，|   不要说300ms问题   |  但是会有300ms延迟问题：手机早期：用于断定是否是双击放大缩小
  36.     * 
  37.     * 移动端事件
  38.     * touchstart：手指按下触发
  39.     * touchmove：手指移动时触发
  40.     * touched：手指离开时触发
  41.     * touchcancel：事件被打断是触发
  42.     * 
  43.     * 移动端事件执行顺序：touchstart->touchmove->touched->click
  44.     * 
  45.     * touchEvent	  对象与pc端事件的差异对比，多了三个TouchList属性
  46.     * touches         位于当前屏幕上的所有手指的一个列表
  47.     * targetTouches   位于当前DOM对象上的手指的一个列表
  48.     * changedTouhes   保存状态改变的手指对象的一个列表
  49.     * 
  50.     * 每个TouchList中有多个对象，每个Touch对象的对象属性
  51.     * screenX 相对屏幕左边的距离
  52.     * screenY 相对屏幕上边的距离
  53.     * clientX  相对浏览器左边的距离
  54.     * clientY  相对浏览器上边的距离
  55.     * pageX  相对页面左边的距离
  56.     * pageY  相对页面上边的距离
  57.     * target  触摸的当前元素
  58.     * identifier 当前触摸对象的id,用于辨别手指
  59.     * radiusX, radiusY  手指触摸的范围
  60. */
  61. </script>
  62. <style type="text/css">
  63. /*媒体查询一*/
  64. * {
  65.     margin: 0;
  66.     padding: 0;
  67. }
  68.  
  69. body {
  70.     background-color: pink;
  71. }
  72.  
  73. /*使用@media query可以实现响应式布局效果，会根据不同的条件，去设置不同的样式*/
  74. /*screen表示屏幕，min-width：1200px 表示宽度最小值是1200px换句话说就是当屏幕宽度大于等于1200px的时候是什么样式*/
  75. @media only screen and (min-width:1200px) {
  76.  
  77.     /*这里写样式*/
  78.     body {
  79.         background-color: red;
  80.     }
  81. }
  82.  
  83. /*当屏幕宽度，大于800，小于1199显示的样式*/
  84. @media only screen and (min-width: 800px) and (max-width:1199px) {
  85.     body {
  86.         background-color: aqua;
  87.     }
  88. }
  89.  
  90. /*当屏幕宽度，大于400，小于640显示的样式*/
  91. /*//如果在媒体查询中没有衔接上的部分，会显示默认部分*/
  92. @media only screen and (min-width: 400px) and (max-width: 640px) {
  93.     body {
  94.         background-color: yellow;
  95.     }
  96. }
  97. </style>
  98. <!-- 
  99. 	媒体查询二
  100. 	<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
  101. 	<link rel="stylesheet" href="css/m320.css" media="only screen and (max-width:320px)">
  102. 	<link rel="stylesheet" href="css/m375.css" media="only screen and (min-width:321px) and (max-width:375px)">
  103. 	<link rel="stylesheet" href="css/m414.css" media="only screen and (min-width:376px) and (max-width:414px)">
  104.  -->
  105.  
  106. </html>

移动端点击事件

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title></title>
  6. </head>
  7.  
  8. <body>
  9. </body>
  10. <script type="text/javascript">
  11. // 移动端手势
  12. var box = document.querySelector('#box')
  13. //pc端的click事件
  14. box.addEventListener('click', function(e) {
  15.     console.log('===========click============');
  16.     console.log(e);
  17. });
  18. //手指按下
  19. box.addEventListener('touchstart', function(e) {
  20.     console.log('===========touchstart============');
  21.     //            Fn(e);
  22. })
  23. //手指移动
  24. box.addEventListener('touchmove', function(e) {
  25.     console.log('==========touchmove===========');
  26.     Fn(e);
  27. })
  28. //手指抬起
  29. box.addEventListener('touchend', function() {
  30.     console.log('============touchend==========');
  31. });
  32. //被打断后出发
  33. box.addEventListener('touchcancel', function() {
  34.     alert('============被打断了================');
  35. })
  36.  
  37. var touchesH1 = document.querySelector('#box h1:nth-of-type(1)');
  38. var targettouchesH1 = document.querySelector('#box h1:nth-of-type(2)');
  39. var changetouchesH1 = document.querySelector('#box h1:nth-of-type(3)');
  40.  
  41. function Fn(e) {
  42.     touchesH1.innerHTML = 'touches' + e.touches.length;
  43.     targettouchesH1.innerHTML = 'targettouches' + e.targetTouches.length;
  44.     changetouchesH1.innerHTML = 'changetouches' + e.changedTouches.length;
  45.  
  46. }
  47.  
  48. // 使用touch库（移动端）
  49. $('#box').tap(function() {
  50.     console.log('====tap====')
  51. })
  52. $('#box').longTap(function() {
  53.     console.log('====long tap====')
  54. })
  55. $('#box').doubleTap(function() {
  56.     console.log('====double tap====')
  57. })
  58.  
  59. $('#box').swiperLeft(function() {
  60.     console.log('====left tap====')
  61. })
  62.  
  63. // 使用zepto库（移动端）
  64. $("#box").tap(function() {
  65.     console.log('======tap=========');
  66. })
  67. $("#box").singleTap(function() {
  68.     console.log('======singleTap=========');
  69. })
  70. $("#box").doubleTap(function() {
  71.     console.log('======doubleTap=========');
  72. })
  73. $("#box").longTap(function() {
  74.     console.log('======longTap=========');
  75. })
  76. $("#box").swipe(function() {
  77.     console.log('======swipeTap=========');
  78. })
  79.  
  80.  
  81.  
  82. // 自定义Touch事件库
  83. //封装自定义的touch事件库
  84. //注意:这里前面一个分号，是为了防止引用其他库的时候，那个库没有分号结尾，以后代码压缩的话容易出问题
  85. ;
  86. (function(window, undefined) {
  87.     var query = function(selector) {
  88.         return query.fn.init(selector);
  89.     };
  90.  
  91.     query.fn = query.prototype = {
  92.         //初始化方法，就是模拟获取元素的方法，但这里获取的不是真正的元素，真正的元素存取在与整个对象的element属性中
  93.         init: function(selector) {
  94.             if (typeof selector == 'string') {
  95.                 this.element = document.querySelector(selector);
  96.                 return this;
  97.             }
  98.         },
  99.  
  100.         //单击，handler是回调函数，就是单击之后做出的响应功能
  101.         tap: function(handler) {
  102.             this.element.addEventListener('touchstart', touchFn);
  103.             this.element.addEventListener('touchend', touchFn);
  104.  
  105.             //用来区分和长按的时间变量，做一个时间差判断
  106.             var startTime, endTime;
  107.  
  108.             function touchFn(e) {
  109.                 switch (e.type) {
  110.                     case 'touchstart':
  111.                         //按下的时候记录一个时间
  112.                         startTime = new Date().getTime();
  113.                         break;
  114.                     case 'touchend':
  115.                         //离开的事件记录一个时间
  116.                         endTime = new Date().getTime();
  117.                         if (endTime - startTime < 500) {
  118.                             //在手势离开的时候，回调
  119.                             handler();
  120.                         }
  121.  
  122.                         break;
  123.  
  124.                 }
  125.             }
  126.         },
  127.         //长按
  128.         longTap: function(handler) {
  129.             this.element.addEventListener('touchstart', touchFn);
  130.             this.element.addEventListener('touchend', touchFn);
  131.             //这个移动事件是为了解决与其他事件冲突问题
  132.             this.element.addEventListener('touchmove', touchFn);
  133.             var timeId;
  134.  
  135.             function touchFn(e) {
  136.                 switch (e.type) {
  137.                     case 'touchstart':
  138.                         //按下达到500ms，我们认为是长按
  139.                         clearTimeout(timeId);
  140.  
  141.                         timeId = setTimeout(function() {
  142.                             handler();
  143.                         }, 500);
  144.                         break;
  145.                     case 'touchend':
  146.                         //离开的时候清空定时器
  147.                         clearTimeout(timeId);
  148.                         break;
  149.                     case 'touchmove':
  150.                         //一旦移动了就清空长按定时器
  151.                         clearTimeout(timeId);
  152.                         break;
  153.  
  154.                 }
  155.             }
  156.         },
  157.         //双击
  158.         doubleTap: function(handler) {
  159.             this.element.addEventListener('touchstart', touchFn);
  160.             this.element.addEventListener('touchend', touchFn);
  161.  
  162.             //记录次数
  163.             var tapCount = 0,
  164.                 timeId;
  165.  
  166.             function touchFn(e) {
  167.                 switch (e.type) {
  168.                     case 'touchstart':
  169.                         //按下的时候记录一次
  170.                         tapCount++;
  171.                         //刚进来的时候，就清空一下定时器
  172.                         clearTimeout(timeId);
  173.  
  174.                         timeId = setTimeout(function() {
  175.                             //如果达到500ms，我们认为就不是双击，要把tapCount清零
  176.                             tapCount = 0;
  177.                         }, 500);
  178.                         break;
  179.                     case 'touchend':
  180.                         //离开的时候清空定时器
  181.                         if (tapCount == 2) {
  182.                             //当按下2次的时候，才算双击
  183.                             handler();
  184.                             //触发双击之后，点击次数清零
  185.                             tapCount = 0;
  186.                             //清空定时器
  187.                             clearTimeout(timeId);
  188.                         }
  189.  
  190.                         break;
  191.  
  192.                 }
  193.             }
  194.         },
  195.         //左滑
  196.         swiperLeft: function(handler) {
  197.             this.element.addEventListener('touchstart', touchFn);
  198.             this.element.addEventListener('touchend', touchFn);
  199.  
  200.             //手势触发的坐标
  201.             var startX, startY, endX, endY;
  202.  
  203.             function touchFn(e) {
  204.                 switch (e.type) {
  205.                     case 'touchstart':
  206.                         //按下的时候记录起始的坐标
  207.                         startX = e.targetTouches[0].pageX;
  208.                         startY = e.targetTouches[0].pageY;
  209.                         break;
  210.                     case 'touchend':
  211.                         //离开的时候记录下终止坐标
  212.                         endX = e.changedTouches[0].pageX;
  213.                         endY = e.changedTouches[0].pageY;
  214.                         //判断是否是左右滑&& //判断具体是左滑，还是右滑
  215.                         if (Math.abs(endX - startX) >= Math.abs(endY - startY) && (startX - endX) >= 25) {
  216.                             handler();
  217.                         }
  218.                         break;
  219.  
  220.                 }
  221.             }
  222.         },
  223.     }
  224.     query.fn.init.prototype = query.fn;
  225.     window.$ = window.query = query;
  226. }(window, undefined))
  227. </script>
  228.  
  229. </html>

到此这篇关于CSS弹性布局FLEX,媒体查询及移动端点击事件的实现的文章就介绍到这了,更多相关CSS弹性布局内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

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

Flex热门文章

  • 解决display:flex属性 justify-content: space-between换行后的排版问题 _CSS布局实例_CSS
  • 详解flex实现左右布局中按钮溢出隐藏效果_CSS教程_CSS
  • flex布局实现左侧文字溢出省略右侧文字自适应_CSS布局实例_CSS
  • flex布局被子元素撑开如何保持内容不超出容器的方法_CSS教程_CSS
  • css3中flex布局宽度不生效的解决_css3_CSS
  • 关于flex 上下文中自动 margin的问题(完整例子)_CSS教程_CSS
  • 详解flex布局的元素如何分配容器的剩余空间_CSS教程_CSS
  • CSS：弹性布局（display:flex）
  • css flex几种多列布局_CSS教程_CSS
  • CSS3 Flex 弹性布局实例代码详解_css3_CSS

    • Flex推荐文章

  • CSS鍚堝苟鍗曞厓鏍煎洓绉嶆柟寮忕ず渚嬭瑙?table/display/flex/grid)_CSS鏁欑▼_CSS
  • 【布局技巧】Flex 布局下居中溢出滚动截断问题
  • 别再用 float 布局了，flex 才是未来！
  • 一篇文章带你掌握Flex布局的所有用法 - 公众号-web前端进阶
  • 关于flex 上下文中自动 margin的问题(完整例子)_CSS教程_CSS
  • CSS弹性布局FLEX,媒体查询及移动端点击事件的实现_CSS教程_CSS
  • css弹性盒flex-grow、flex-shrink、flex-basis详解_CSS教程_CSS
  • FLEXLINK指令的理解
  • 10分钟理解CSS3 FlexBox弹性布局_css3_CSS

    • 本站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号