flex布局中的align-content属性
生活随笔
收集整理的這篇文章主要介紹了
flex布局中的align-content属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
align-content屬性起作用的條件:
- 對父元素設置自由盒屬性display:flex;
- 并且設置排列方式為橫向排列flex-direction:row; （默認值）
- 設置換行，flex-wrap:wrap;
Demo代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>align-content屬性</title><style>.box {width: 200px;display: flex;/* flex-direction: row;flex-wrap: wrap; */flex-flow: row wrap;/* 默認值為:stretch align-content:可以取的值有 flex-start,flex-end,center,space-around,space-between,stretch*/align-content: stretch;height: 300px;background-color: grey;}.box1 {height: 30px;width: 100px;background-color: orange;}.box2 {height: 50px;width: 200px;background-color: red;}.box3 {height: 30px;width: 100px;background-color: #08a9b5;}</style> </head><body><div class="box"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></div> </body></html>效果：
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content:space-between;
參考文章：https://blog.csdn.net/qq_40323256/article/details/102817242?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165589587016782395328090%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=165589587016782395328090&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-102817242-null-null.142v20rank_v33,157v15new_3&utm_term=align-content&spm=1018.2226.3001.4187
總結
以上是生活随笔為你收集整理的flex布局中的align-content属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LM2576在嵌入式系统中的应用
- 下一篇： 云骑士装机大师可靠吗_是什么使云环境可靠