我有一個彈性盒設計的頁面，它將按鈕放置在頁面的邊緣。如果我到處都有按鈕，則所有按鈕都已就位：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?，F在他們當然不再處于中間了：現在我可以添加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 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>
如果您想要完美居中，您可以使用如下所示的一些翻譯進行糾正，因為不同的情況是已知的：
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 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>
侃侃無極
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 id="root">
? <div class="tray tray-top">
? ? <div class="flex-positioning-wrapper"><!--<div class="button begin">1</div>--></div>
? ? <div class="flex-positioning-wrapper"><div class="button middle">2</div></div>
? ? <div class="flex-positioning-wrapper"><div class="button end">3</div></div>
? </div>
? <div class="tray tray-left">
? ? <div class="flex-positioning-wrapper"><!--<div class="button begin">4</div>--></div>
? ? <div class="flex-positioning-wrapper"><div class="button middle">5</div></div>
? ? <div class="flex-positioning-wrapper"><div class="button end">6</div></div>
? </div>
? <div class="tray tray-right">
? ? <div class="flex-positioning-wrapper"><div class="button begin">7</div></div>
? ? <div class="flex-positioning-wrapper"><div class="button middle">8</div></div>
? ? <div class="flex-positioning-wrapper"><div class="button end">9</div></div>
? </div>
? <div class="tray tray-bottom">
? ? <div class="flex-positioning-wrapper"><!--<div class="button begin">10</div>--></div>
? ? <div class="flex-positioning-wrapper"><div class="button middle">11</div></div>
? ? <div class="flex-positioning-wrapper"><div class="button end">12</div></div>
? </div>
</div>
注意：當前設置使得if太小.tray-left而.tray-right溢出- 我添加了，但如果這不適合您的用例，您可能需要尋找其他選項。#rootmin-height
注2：我個人對此布局的建議是使用grid而不是flexbox，
- 2 回答
- 0 關注
- 178 瀏覽
添加回答
舉報
0/150
提交
取消