您现在的位置是：网站首页> 编程资料编程资料

深入理解css中的align-content属性jquery结合CSS实现的多样式多视频列表连播效果源码css中常用的几种居中方法(推荐)深入理解CSS中的盒子模型CSS3实用方法总结(推荐)CSS中的各种选择器与样式优先级小结CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

2021-09-05 904人已围观

简介 下面小编就为大家带来一篇深入理解css中的align-content属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

align-content

作用:

会设置自由盒内部各个项目在垂直方向排列方式。

条件:
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
设置对象:

这个属性是对她容器内部的项目起作用，对父元素进行设置。


取值:
stretch:默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。

XML/HTML Code复制内容到剪贴板
  1. DOCTYPE=html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>  
  6. Align-content   
  7. title>  
  8. <style>  
  9.   
  10. #father{   
  11.        
  12.     width:200px;   
  13.     display:flex;   
  14.     flex-direction:row;   
  15.     flex-wrap:wrap;   
  16.     align-content:strech;   
  17.     height:200px;   
  18.     background-color:grey;   
  19. }   
  20. .son1{   
  21.        
  22.       height:30px;   
  23.     width:100px;   
  24.     background-color:orange;   
  25. }   
  26.   
  27. .son2{   
  28.        
  29.     height:30px;   
  30.     width:100px;   
  31.     background-color:red;   
  32. }   
  33.   
  34. .son3{   
  35.        
  36.       height:30px;   
  37.     width:100px;   
  38.     background-color:#08a9b5;   
  39. }   
  40.   
  41.   
  42. style>  
  43. head>  
  44. <body>  
  45.   
  46. <div id="father">  
  47.   
  48. <div class="son1">  
  49. q   
  50. div>  
  51.   
  52. <div class="son2">  
  53. w   
  54. div>  
  55.   
  56. <div class="son3">  
  57. e   
  58. div>  
  59. <div class="son3">  
  60. e   
  61. div>  
  62. <div class="son3">  
  63. e   
  64. div>  
  65.   
  66.   
  67.   
  68. div>  
  69.   
  70. body>  
  71. html>  

Center：这个会取消项目之间的空白并把所有项目垂直居中。

XML/HTML Code复制内容到剪贴板
  1. DOCTYPE=html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>  
  6. 关于文档元素测试   
  7. title>  
  8. <style>  
  9.   
  10. #father{   
  11.        
  12.     width:200px;   
  13.     display:flex;   
  14.     flex-direction:row;   
  15.     flex-wrap:wrap;   
  16.     align-content:center;   
  17.     height:200px;   
  18.     background-color:grey;   
  19. }   
  20. .son1{   
  21.        
  22.       height:30px;   
  23.     width:100px;   
  24.     background-color:orange;   
  25. }   
  26.   
  27. .son2{   
  28.        
  29.     height:30px;   
  30.     width:100px;   
  31.     background-color:red;   
  32. }   
  33.   
  34. .son3{   
  35.        
  36.       height:30px;   
  37.     width:100px;   
  38.     background-color:#08a9b5;   
  39. }   
  40.   
  41.   
  42. .son4{   
  43.        
  44.       height:30px;   
  45.     width:100px;   
  46.     background-color:#9ad1c3;   
  47. }   
  48.   
  49. .son5{   
  50.        
  51.       height:30px;   
  52.     width:100px;   
  53.     background-color:rgb(21,123,126);   
  54. }   
  55. style>  
  56. head>  
  57. <body>  
  58.   
  59. <div id="father">  
  60.   
  61. <div class="son1">  
  62. q   
  63. div>  
  64.   
  65. <div class="son2">  
  66. w   
  67. div>  
  68.   
  69. <div class="son3">  
  70. e   
  71. div>  
  72. <div class="son4">  
  73. e   
  74. div>  
  75. <div class="son5">  
  76. e   
  77. div>  
  78.   
  79.   
  80.   
  81. div>  
  82.   
  83. body>  
  84. html>  

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：CSS中的各种选择器与样式优先级小结css选择器设置标签样式的实例代码CSS3 :not()选择器实现最后一行li去除某种css样式详解CSS中的选择器优先级及样式层叠问题解决CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式html中css三种常见的样式选择器CSS 样式的使用方式、选择器

下一篇：弹窗居中的简单实现方法淡入淡出效果的居中弹窗代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网