您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了css3中flex布局如果實(shí)現(xiàn)平均分配元素,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“css3中flex布局如果實(shí)現(xiàn)平均分配元素”這篇文章吧。
例子一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; } body,html{ height: 100vh; min-width: 800px; } .container{ display:flex; flex-wrap:wrap; display: -webkit-flex; /* Safari */ } .container>.item{ border: 1px solid black; flex:1; height:100px; background: #abcdef; } </style> </head> <body> <div class="container"> <div class="item"></div> <main class="item"></main> <div class="item"></div> </div> </body> </html>
例子二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } body,html{ width: 100%; height: 100vh; min-width: 800px; display:flex; display: -webkit-flex; /* Safari */ justify-content: center; align-items: center; } .container{ width: 300px; height: 300px; display:flex; display: -webkit-flex; /* Safari */ flex-wrap: wrap; } .container>.item{ flex:0 0 33.3%; height:100px; background: #abcdef; border: 1px solid red; } main{ flex:0 0 33.3%; height:100px; background-color: #ccc; border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> </div> </body> </html>
flex:0 0 33.3% 相當(dāng)于flex-basis:33.3%,使每一個(gè)元素的寬度占外層容器的33.3%,因此每行最多能夠排開(kāi)三個(gè)元素。
flex-wrap:wrap 表示每行填滿時(shí)會(huì)自動(dòng)換行。
例子三:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } body,html{ width: 100%; height: 100vh; min-width: 800px; display:flex; display: -webkit-flex; /* Safari */ justify-content: center; align-items: center; } .container{ width: 300px; height: 300px; margin: 50px; display:flex; display: -webkit-flex; /* Safari */ flex-wrap: wrap; justify-content: space-between; } .container>.item{ flex:0 0 30%; height:90px; background: #abcdef; border: 1px solid red; } main{ flex:0 0 30%; height:90px; background-color: #ccc; border: 1px solid red; } </style> </head> <body> <div class="container"> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> </div> </body> </html>
justify-content:space-between表示主軸方向的多余空間平均分配在兩兩item之間。
以上就是關(guān)于“css3中flex布局如果實(shí)現(xiàn)平均分配元素”的內(nèi)容,如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò),勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí),若想了解更多相關(guān)知識(shí)內(nèi)容,請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。