首页猿问 HTML - Flexbox...

HTML - Flexbox 元素独立于其他元素居中对齐，同时保持其填充

Html5

慕少森 2023-10-04 15:35:08

我有一个弹性盒设计的页面，它将按钮放置在页面的边缘。如果我到处都有按钮，则所有按钮都已就位：html,body { height: 100%; margin: 0; text-align: center;}#root { background-color: blue; height: 85%; width: 85%;}.tray { box-sizing: border-box; background-color: red; border: thin solid black;}.tray-top,.tray-bottom { height: 48px; line-height: 48px; clear:both; display:flex; flex-direction:row; justify-content:space-between;}.tray-left,.tray-right { width: 48px; height: calc(100% - 96px); float: left; display:flex; flex-direction:column; justify-content:space-between;}.tray-right { float: right;}.button { background-color: yellow; width: 46px; height: 46px; display:inline-block;}<div id="root"> <div class="tray tray-top"> <div class="button begin">1</div> <div class="button middle">2</div> <div class="button end">3</div> </div> <div class="tray tray-left"> <div class="button begin">4</div> <div class="button middle">5</div> <div class="button end">6</div> </div> <div class="tray tray-right"> <div class="button begin">7</div> <div class="button middle">8</div> <div class="button end">9</div> </div> <div class="tray tray-bottom"> <div class="button begin">10</div> <div class="button middle">11</div> <div class="button end">12</div> </div></div>所以，上面的代码很好，并且按照我想要的方式工作。方框 2、5、8、11 都在中间。但是，如果我不需要一些盒子（如 1、4、10），我仍然需要中间的 2、5、8、11。现在他们当然不再处于中间了：现在我可以添加flex: 1;按钮来对此进行一些控制，但在这种情况下我会失去它们的填充（这很重要，因为它们是按钮）。Flexbox 有没有办法让 2、5、8 和 11 始终位于中间，而与它们之前和之后的其他元素无关？

查看完整描述

2 回答

泛舟湖上清波郎朗

TA贡献1818条经验获得超3个赞

margin:auto除了以下之外，还可以在中间元素上使用space-between：

html,

body {

height: 100%;

margin: 0;

text-align: center;

}

#root {

background-color: blue;

height: 85%;

width: 85%;

}

.tray {

box-sizing: border-box;

background-color: red;

border: thin solid black;

}

.tray-top,

.tray-bottom {

height: 48px;

line-height: 48px;

clear:both;

display:flex;

}

.tray-left,

.tray-right {

width: 48px;

height: calc(100% - 96px);

float: left;

display:flex;

flex-direction:column;

}

.tray-right {

float: right;

}

.button {

background-color: yellow;

width: 46px;

height: 46px;

display:inline-block;

}

.middle {

margin:auto;

}

</div>

</div>

</div>

</div>

如果您想要完美居中，您可以使用如下所示的一些翻译进行纠正，因为不同的情况是已知的：

html,

body {

height: 100%;

margin: 0;

text-align: center;

}

#root {

background-color: blue;

height: 85%;

width: 85%;

}

.tray {

box-sizing: border-box;

background-color: red;

border: thin solid black;

}

.tray-top,

.tray-bottom {

height: 48px;

line-height: 48px;

clear: both;

display: flex;

justify-content: space-between

}

.tray-left,

.tray-right {

width: 48px;

height: calc(100% - 96px);

float: left;

display: flex;

flex-direction: column;

justify-content: space-between

}

.tray-right {

float: right;

}

.button {

background-color: yellow;

width: 46px;

height: 46px;

display: inline-block;

}

.middle {

margin: auto;

}

.tray-top .middle:first-child,

.tray-bottom .middle:first-child {

transform: translateX(50%)

}

.tray-top .middle:last-child,

.tray-bottom .middle:last-child {

transform: translateX(-50%)

}

.tray-left .middle:first-child,

.tray-right .middle:first-child {

transform: translateY(50%)

}

.tray-left .middle:last-child,

.tray-right .middle:last-child {

transform: translateY(-50%)

}

.tray .middle:first-child:last-child {

transform: none;

}

</div>

</div>

</div>

</div>

反对回复 2023-10-04

侃侃无极

TA贡献2051条经验获得超10个赞

您可以引入包装元素来定位并将按钮放置在：

html,

body {

height: 100%;

margin: 0;

text-align: center;

}

#root {

background-color: blue;

height: 85%;

width: 85%;

min-height: 236px;

}

.tray {

box-sizing: border-box;

background-color: red;

border: thin solid black;

}

.tray-top,

.tray-bottom {

height: 48px;

line-height: 48px;

clear:both;

display:flex;

flex-direction:row;

}

.tray-left,

.tray-right {

width: 48px;

height: calc(100% - 96px);

float: left;

display:flex;

flex-direction:column;

}

.tray-right {

float: right;

}

.button {

background-color: yellow;

width: 46px;

height: 46px;

display:inline-block;

}

.flex-positioning-wrapper { display: inline-block; flex-basis: calc(100% / 3); display: flex; }

.flex-positioning-wrapper .begin { margin-bottom: auto; margin-right: auto; }

.flex-positioning-wrapper .middle { margin: auto; }

.flex-positioning-wrapper .end { margin-top: auto; margin-left: auto; }

</div>

</div>

</div>

</div>

注意：当前设置使得if太小.tray-left而.tray-right溢出- 我添加了，但如果这不适合您的用例，您可能需要寻找其他选项。#rootmin-height

注2：我个人对此布局的建议是使用grid而不是flexbox，

反对回复 2023-10-04

2 回答
0 关注
61 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

HTML - Flexbox 元素独立于其他元素居中对齐，同时保持其填充

HTML - Flexbox 元素独立于其他元素居中对齐，同时保持其填充

2 回答

添加回答