本文主要包含css,align-content等相关知识,佚名 希望在学习及工作中可以帮助到您
align-content
作用:
会设置自由盒内部各个项目在垂直方向排列方式。
条件:
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
设置对象:
这个属性是对她容器内部的项目起作用，对父元素进行设置。
取值:
stretch:默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。
- <!DOCTYPE=html>
- <html lang="zh-cn">
- <head>
- <meta charset="UTF-8">
- <title>
- Align-content
- </title>
- <style>
- #father{
- width:200px;
- display:flex;
- flex-direction:row;
- flex-wrap:wrap;
- align-content:strech;
- height:200px;
- background-color:grey;
- }
- .son1{
- height:30px;
- width:100px;
- background-color:orange;
- }
- .son2{
- height:30px;
- width:100px;
- background-color:red;
- }
- .son3{
- height:30px;
- width:100px;
- background-color:#08a9b5;
- }
- </style>
- </head>
- <body>
- <div id="father">
- <div class="son1">
- q
- </div>
- <div class="son2">
- w
- </div>
- <div class="son3">
- e
- </div>
- <div class="son3">
- e
- </div>
- <div class="son3">
- e
- </div>
- &nb