CSS flexbox centering
我有以下代码段(仅HTML和CSS)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .container { display: flex; justify-content: space-between; border: 1px solid black; } nav ul { display: flex; flex-direction: row; justify-content: center; padding: 0; } nav ul li { list-style: none; padding: 0 5px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <nav class="menu1"> <ul> <li> 1.1 </li> <li> 1.2 </li> </ul> </nav> <nav class="menu2"> <ul> <li> 2.1 </li> <li> 2.2 </li> <li> 2.3 </li> <li> 2.4 </li> <li> 2.5 </li> <li> 2.6 </li> <li> 2.7 </li> <li> 2.8 </li> <li> 2.9 </li> </ul> </nav> <nav class="menu3"> <ul> <li> 3.1 </li> <li> 3.2 </li> <li> 3.3 </li> <li> 3.4 </li> <li> 3.5 </li> <li> 3.6 </li> <li> 3.7 </li> <li> 3.8 </li> <li> 3.9 </li> </ul> </nav> |
您注意到,由于
但是,我需要确保
我该怎么做?
谢谢。
在我看来,网格似乎比flex更好。
然后可以将初始和最后ul更改为
然后,要使最后一个ul对齐到末尾,您可以在其nav元素(class ='menu3')中添加属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .container { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid black; } nav ul { display: flex; flex-direction: row; justify-content: center; padding: 0; } .menu1 ul{ display: inline-flex; } .menu3{ text-align: end; } .menu3 ul{ display: inline-flex; } nav ul li { list-style: none; padding: 0 5px; } |
您必须使用flex吗?否则,可以将菜单2移到绝对位置的中心。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .container { display: flex; justify-content: space-between; border: 1px solid black; position: relative; } nav ul { display: flex; flex-direction: row; justify-content: center; padding: 0; } nav ul li { list-style: none; padding: 0 5px; } .menu2 { position: absolute; left: 50%; transform: translateX(-50%); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <html> <body> <nav class="menu1"> <ul> <li> 1.1 </li> <li> 1.2 </li> </ul> </nav> <nav class="menu2"> <ul> <li> 2.1 </li> <li> 2.2 </li> <li> 2.3 </li> <li> 2.4 </li> <li> 2.5 </li> <li> 2.6 </li> <li> 2.7 </li> <li> 2.8 </li> <li> 2.9 </li> </ul> </nav> <nav class="menu3"> <ul> <li> 3.1 </li> <li> 3.2 </li> <li> 3.3 </li> <li> 3.4 </li> <li> 3.5 </li> <li> 3.6 </li> <li> 3.7 </li> <li> 3.8 </li> <li> 3.9 </li> </ul> </nav> </body> </html> |
我会将.menu1-3设置为不同的flex规则,让外面的规则尝试平等地谈论很多空间,而中间的那些则只需要它。
溢出:隐藏对于确保内容不会超出flex-base至关重要。但是还有其他规则也会根据您想要的项目的行为而产生相同的效果(例如,使用flex-wrap将项目package到下一行)
根据您的需要,可以考虑给中间的列指定一个特定的flex-base,例如固定像素或百分比(所有3个.menu都将获得33.33%)。如果需要,还可以添加边距(到中间列)。
具有网格和绝对位置的解决方案也可能根据您的需要完成此工作。位置:绝对具有最佳的浏览器支持,如今,我的flex解决方案可在大多数浏览器上使用。据我所知,网格也应该具有最差的覆盖范围
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .container { display: flex; justify-content: space-between; border: 1px solid black; } nav ul { display: flex; flex-direction: row; justify-content: center; padding: 0; } nav ul li { list-style: none; padding: 0 5px; } .menu1, .menu3 { flex: 1 1 50%; overflow: hidden; } .menu1 ul { justify-content: flex-start } .menu2 ul { justify-content: flex-end } .menu2 { flex: 0 0 auto; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <html> <body> <nav class="menu1"> <ul> <li> 1.1 </li> <li> 1.2 </li> </ul> </nav> <nav class="menu2"> <ul> <li> 2.1 </li> <li> 2.2 </li> <li> 2.3 </li> <li> 2.4 </li> <li> 2.5 </li> <li> 2.6 </li> <li> 2.7 </li> <li> 2.8 </li> <li> 2.9 </li> </ul> </nav> <nav class="menu3"> <ul> <li> 3.1 </li> <li> 3.2 </li> <li> 3.3 </li> <li> 3.4 </li> <li> 3.5 </li> <li> 3.6 </li> <li> 3.7 </li> <li> 3.8 </li> <li> 3.9 </li> </ul> </nav> </body> </html> |
我知道它不是Flexbox,但您可能需要查看CSS网格布局。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .container { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid black; } nav ul { padding: 0; } nav ul li { display: inline-block; list-style: none; padding: 0 5px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | <html> <body> <nav class="menu1"> <ul> <li> 1.1 </li> <li> 1.2 </li> </ul> </nav> <nav class="menu2"> <ul> <li> 2.1 </li> <li> 2.2 </li> <li> 2.3 </li> <li> 2.5 </li> <li> 2.9 </li> </ul> </nav> <nav class="menu3"> <ul> <li> 3.1 </li> <li> 3.2 </li> <li> 3.3 </li> <li> 3.4 </li> <li> 3.5 </li> <li> 3.6 </li> <li> 3.7 </li> <li> 3.8 </li> <li> 3.9 </li> </ul> </nav> </body> </html> |