之前写垂直方向都是写死，今天看了flex布局，原来，垂直方向也是可以像水平方向一样。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .lottery-draw-container{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 300px; height: 300px; border: 1px solid #000; display: flex; flex-direction: column; } .item{ flex-basis: 100px; display: flex; justify-content:center; align-items: center; border: 1px solid #000; } .active{ background-color: red; } </style> </head> <body> <div class="lottery-draw-container"> <div style="display: flex;flex:1;"> <div class="item active"><span>一等奖</span></div> <div class="item"><span>二等奖</span></div> <div class="item"><span>三等奖</span></div> </div> <div style="display: flex;flex:1;"> <div class="item"><span>四等奖</span></div> <span class="item"><span>开始</span></span> <div class="item"><span>五等奖</span></div> </div> <div style="display: flex;flex:1;"> <div class="item"><span>六等奖</span></div> <div class="item"><span>七等奖</span></div> <div class="item"><span>八等奖</span></div> </div> </div> </body> </html>