首页 > 开发 > CSS > 正文

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

2024-07-11 08:32:56
字体:
来源:转载
供稿:网友

align-content

作用:

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

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

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


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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE=html>   <html lang="zh-cn">  
  2. <head>   <meta charset="UTF-8">  
  3. <title>   Align-content   
  4. </title>   <style>  
  5.    #father{   
  6.             width:200px;   
  7.     display:flex;        flex-direction:row;   
  8.     flex-wrap:wrap;        align-content:strech;   
  9.     height:200px;        background-color:grey;   
  10. }    .son1{   
  11.               height:30px;   
  12.     width:100px;        background-color:orange;   
  13. }      
  14. .son2{           
  15.     height:30px;        width:100px;   
  16.     background-color:red;    }   
  17.    .son3{   
  18.               height:30px;   
  19.     width:100px;        background-color:#08a9b5;   
  20. }      
  21.    </style>  
  22. </head>   <body>  
  23.    <div id="father">  
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表