一点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css flex布局-画骰子</title> <style> .box { margin: 20px; height: 100px; width: 100px; border: 2px solid grey; border-radius: 10px; /* 容器内元素使用flex布局 */ display: flex; /* 主轴居中对齐 */ justify-content: center; } .point { border-radius: 50%; height: 20px; width: 20px; background: black; /* align-self 写在子元素上，覆盖父元素指定的交叉轴对齐方式 */ align-self: center; } </style> </head> <body> <div class="box"> <div class="point"></div> </div> </body> </html>
两点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css flex布局-画骰子</title> <style> .box { margin: 20px; height: 100px; width: 100px; border: 2px solid grey; border-radius: 10px; /* 容器内元素使用flex布局 */ display: flex; /* 主轴改为纵向 */ flex-direction: column; /* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */ justify-content: space-evenly; /* 交叉轴（横向）居中对齐 */ align-items: center; } .point { border-radius: 50%; height: 20px; width: 20px; background: black; } </style> </head> <body> <div class="box"> <div class="point"></div> <div class="point"></div> </div> </body> </html>
三点
简易版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css flex布局-画骰子</title> <style> .box { margin: 20px; height: 100px; width: 100px; border: 2px solid grey; border-radius: 10px; /* 容器内元素使用flex布局 */ display: flex; /* 主轴改为纵向 */ flex-direction: column; /* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */ justify-content: space-evenly; /* 交叉轴（横向）居中对齐 */ align-items: center; } .point { border-radius: 50%; height: 20px; width: 20px; background: black; } </style> </head> <body> <div class="box"> <div class="point"></div> <div class="point"></div> <div class="point"></div> </div> </body> </html>
复杂版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css flex布局-画骰子</title> <style> .box { margin: 20px; height: 100px; width: 100px; border: 2px solid grey; border-radius: 10px; padding: 10px; box-sizing: border-box; /* 容器内元素使用flex布局 */ display: flex; /* 主轴（横向）相对均匀对齐（子元素间距相等，两端边缘间距为子元素间距的一半） */ justify-content: space-between; } /* 第一个子元素，交叉轴默认起点对齐 */ .point { border-radius: 50%; height: 20px; width: 20px; background: black; } .point:nth-child(2) { /* 第二个子元素，交叉轴居中对齐 */ align-self: center; } .point:nth-child(3) { /* 第三个子元素，交叉轴终点对齐 */ align-self: flex-end; } </style> </head> <body> <div class="box"> <div class="point"></div> <div class="point"></div> <div class="point"></div> </div> </body> </html>
四点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css flex布局-画骰子</title> <style> .box { margin: 20px; height: 100px; width: 100px; border: 2px solid grey; border-radius: 10px; padding: 10px; box-sizing: border-box; /* 容器内元素使用flex布局 */ display: flex; /* 将主轴改为纵向 */ flex-direction: column; /* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */ justify-content: space-evenly; } .row { /* 每行内元素使用flex布局 */ display: flex; /* 主轴（横向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */ justify-content: space-evenly; } .point { border-radius: 50%; height: 20px; width: 20px; background: black; } </style> </head> <body> <div class="box"> <div class="row"> <div class="point"></div> <div class="point"></div> </div> <div class="row"> <div class="point"></div> <div class="point"></div> </div> </div> </body> </html>
五点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css flex布局-画骰子</title> <style> .box { margin: 20px; height: 100px; width: 100px; border: 2px solid grey; border-radius: 10px; padding: 10px 16px; box-sizing: border-box; /* 容器内元素使用flex布局 */ display: flex; /* 将主轴改为纵向 */ flex-direction: column; /* 主轴（纵向）绝对均匀对齐（子元素间距以及两端边缘间距都相等） */ justify-content: space-evenly; } .row1 { /* 每行内元素使用flex布局 */ display: flex; /* 主轴（横向）相对均匀对齐 */ justify-content: space-between; } .row2 { /* 每行内元素使用flex布局 */ display: flex; /* 主轴（横向）居中对齐 */ justify-content: center; } .point { border-radius: 50%; height: 20px; width: 20px; background: black; } </style> </head> <body> <div class="box"> <div class="row1"> <div class="point"></div> <div class="point"></div> </div> <div class="row2"> <div class="point"></div> </div> <div class="row1"> <div class="point"></div> <div class="point"></div> </div> </div> </body> </html>
六点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css flex布局-画骰子</title> <style> .box { margin: 20px; height: 100px; width: 100px; border: 2px solid grey; border-radius: 10px; padding: 10px 16px; box-sizing: border-box; /* 容器内元素使用flex布局 */ display: flex; /* 将主轴改为纵向 */ flex-direction: column; /* 主轴（纵向）相对均匀对齐 */ justify-content: space-between; } .row { /* 每行内元素使用flex布局 */ display: flex; /* 主轴（横向）绝对均匀对齐 */ justify-content: space-evenly; } .point { border-radius: 50%; height: 20px; width: 20px; background: black; } </style> </head> <body> <div class="box"> <div class="row"> <div class="point"></div> <div class="point"></div> </div> <div class="row"> <div class="point"></div> <div class="point"></div> </div> <div class="row"> <div class="point"></div> <div class="point"></div> </div> </div> </body> </html>
