Flex实现列表元素垂直水平居中

秒速五厘米 2023-10-11 16:48 52阅读 0赞

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 </head>
 <style>
 
 *{
 
 margin: 0;
 padding: 0;
 list-style: none;
 }
 
 ul{
 
 margin: 100px auto;
 width: 200px;
 height: 300px;
 background-color: rgba(1,1,1,.3);
 display: flex;
 flex-direction: column;
 
 }
 
 li{
 
 flex-grow: 1;
 display: flex;
 flex-direction: row;
 }
 
 li a{
 
 flex-grow: 1;
 display: flex;
 align-items: center;
 text-decoration: none;
 color: #333333;
 font-size: 14px;
 justify-content: center;
 }
 
 a:hover{
 
 background-color: rgba(0,0,0,.6);
 }
 
 </style>
 <body>
 
 
 <ul>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 <li><a href="#"> 1 </a></li>
 </ul>
 
 </body>
 </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARGFuY2VEb25rZXk_size_14_color_FFFFFF_t_70_g_se_x_16]

在使用flex时，搞清楚主轴和交叉轴分别是哪个方向，然后弹性容器的属性默认值是什么，弹性项的属性默认值是什么就可以很方便布局。如弹性容器的align-items,对齐弹性项的属性默认值是 stretch，会把元素的长度拉伸到交叉轴弹性容器的100%。例如设置了ul为弹性容器以后，主轴默认是水平的，则交叉轴就是垂直的，那么，就会把弹性项交叉轴方向上的长度拉伸到弹性容器的100%。（这里就是垂直方向，也就是高度）

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARGFuY2VEb25rZXk_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/80bd0f408f754944b5ced9149170eec1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARGFuY2VEb25rZXk=,size_14,color_FFFFFF,t_70,g_se,x_16