首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 770
收藏 0 赞 0 分享

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>  

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>  

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

align-content:flex-end;

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

align-content:space-between;


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

align-content:space-around;


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

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

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 　　但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

　　这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

　　这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22