HTML - выравнивание элемента Flexbox по центру независимо от других элементов при сохранении его отступов - PullRequest
Новая
       0

HTML - выравнивание элемента Flexbox по центру независимо от других элементов при сохранении его отступов

0 голосов
/ 23 марта 2020

У меня есть страница, созданная во flexbox, в которой кнопки расположены по краям страницы.

Все кнопки на месте, если у меня есть кнопки везде: 

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 посередине , Теперь, конечно, они уже не посередине: 

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>

Теперь я могу добавить flex: 1; к кнопкам, чтобы иметь некоторый контроль над этим, но в этом случае я бы потерял их отступы (что важно, поскольку они кнопки).

Можно ли с помощью flexbox все время иметь по 2,5,8 и 11 посередине, независимо от других элементов до и после них?

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Используйте 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>
0 голосов
/ 23 марта 2020

Вы можете ввести элементы обертки для позиционирования и разместить кнопки в пределах: 

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>

Примечание: текущая настройка вызывает переполнение .tray-left и .tray-right, если #root слишком мало - я добавил min-height, но вы можете иметь искать другие варианты, если это не подходит для вашего варианта использования.

Примечание 2: Моя личная рекомендация для этого макета - использовать grid вместо flexbox,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...