设为首页收藏本站
开启辅助访问 切换到宽版

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
搜索
返回列表 发新帖回复
查看: 403|回复: 21

[CSS] 深入理解css中的align-content属性

[复制链接]
ttx9n

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-5-25 09:08:47 | 显示全部楼层 |阅读模式
下面小编就为大家带来一篇深入理解css中的align-content属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

align-content

作用:

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

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

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


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

201605250909265.jpg

201605250909265.jpg

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>  

201605250909266.jpg

201605250909266.jpg

Flex-start:这个会取消项目之间的空白，并把项目放在容器顶部。

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:flex-start;   
  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>  

201605250909267.jpg

201605250909267.jpg

flex-end:这个会取消项目之间的空白并把项目放在容器底部。

align-content:flex-end;

201605250909268.jpg

201605250909268.jpg

space-between这个会使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。

align-content:space-between;

201605250909269.jpg

201605250909269.jpg


Space-around:这个会使每个项目上下位置保留相同长度空白，使得项目之间的空白为两倍的单个项目空白。

align-content:space-around;

2016052509092610.jpg

2016052509092610.jpg


Inherit：使得元素的这个属性继承自它的父元素。
innitial：使元素这个属性为默认初始值。

以上这篇深入理解css中的align-content属性就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

css, align-content

相关帖子
回复

使用道具 举报

adm1n

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2022-8-16 03:44:01 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

qwe520

14

主题

1万

回帖

75

积分

注册会员

Rank: 2

积分
75
发表于 2022-8-26 21:38:39 | 显示全部楼层
女生看了弄丢了卡萨诺的卡洛斯
回复 支持 反对

使用道具 举报

i1efp6c

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-8 14:05:32 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

r8st9

11

主题

2万

回帖

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2023-1-16 03:46:46 | 显示全部楼层
论坛有你更精彩！
回复 支持 反对

使用道具 举报

hd1tvqb3

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-1 15:10:17 | 显示全部楼层
建军节建军节建军节建军节
回复 支持 反对

使用道具 举报

123456

6

主题

1万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2023-9-9 19:23:27 | 显示全部楼层
看到这帖子真是高兴！
回复 支持 反对

使用道具 举报

dingzhi521

2

主题

2万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2024-5-28 18:14:52 | 显示全部楼层
那三门，你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

locopy

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2024-6-25 12:23:48 | 显示全部楼层
天天源码社区论坛
回复 支持 反对

使用道具 举报

pwseqn1h

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-7-2 21:57:21 | 显示全部楼层
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
回复 支持 反对

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-30 02:51 , Processed in 0.074742 second(s), 27 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表