CSS - выравнивание дочернего элемента гибкого контейнера по центру экрана не работает должным образом - PullRequest
Новая
       11

CSS - выравнивание дочернего элемента гибкого контейнера по центру экрана не работает должным образом

0 голосов
/ 15 марта 2019

Я создаю небольшую веб-страницу в стиле Etch-a-Sketch.

Пока я просто пытаюсь получить CSS страницы прямо перед переходом на Javascript, который сгенерирует холст заданного размера, поэтому я статически работаю с сеткой div 16x16 статически на веб-странице.

См. этот кодовый блок , что я имею до сих пор. Извините за смехотворно длинный HTML, как я уже сказал, я просто работаю над форматированием и помещаю сетку 16x16 (800px by 800px) в div с классом .tabletCanvas. По сути, всего 256 делений, которые имеют этот класс.

Как видите, «холст» прилипает к левой стороне, и я хочу, чтобы он выглядел так, как на этом снимке (очень грубый контур, выполненный за 5 минут с использованием фотошопа) .

Что я пробовал до сих пор:

  • Много разных значений для flex:. Что происходит, так это то, что без установки max-width или max-height (исходя из моего понимания flexbox, указание определенной высоты и ширины лишает цели его использования и что все должно обрабатываться с помощью свойства flex:), сетка будет просто переполните вправо и заполните остальную часть экрана. Очевидно, что он не идеален, поскольку я хочу, чтобы он содержался в пределах 800x800 пикселей, и даже после указания max-width и height он все равно будет висеть влево.
  • Создание tabletContainer самого гибкого родителя (контейнера) и пробование всех возможных вариантов align-content, align-items и justify-content внутри него. Ни один из них не имел видимого эффекта
  • Множество различных значений align-self, justify-self в классе .tabletCanvas.
  • Одна вещь, которая возникла на ум, это абсолютное позиционирование div холста, но это, во-первых, сводит на нет цель использования гибкого контейнера

Я думаю, что может сработать использование align-content или align-items свойств в #bodyWrapper для центрирования всех его дочерних элементов, однако если я сделаю это, то рискну испортить поток каждого другое имущество и возвращение себя более или менее к исходной точке, с которой я начал.

Еще одна вещь, которая возникла на ум, это просто добавить много padding-left к #sketchButtons, однако это также кажется смешно неправильным и хакерским подходом.

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

1 голос
/ 15 марта 2019

Я сделал jsfiddle draft вашего дела с упрощенным стилем. Я надеюсь, что вы можете проанализировать код и определить подход.

Короче говоря, это всего лишь центрированная гибкая колонка и абсолютно позиционированное меню. 

html, body {
  width: 100%;
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}


.content {
  display: flex;
  justify-content: center;
 
  width: 100%;
  height: 100%;
  
  position: relative;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 50%;
  height: 50%;
  
  border: 1px solid black;
}

.menu {
  display: flex;
  flex-direction: column;
  
  position: absolute;
  left: 10px;
  top: 0;
}
<div class="app">
  <h1>Header</h1>
  <div class="content">
    <nav class="menu">
      <button>Menu item</button>
      <button>Menu item</button>
      <button>Menu item</button>
    </nav>
    <div class="grid">Grid</div>
  </div>
</div>
0 голосов
/ 15 марта 2019

Если вы просто хотите отцентрировать свою сетку по горизонтали, вот простое решение: 

#tabletContainer {
  margin: auto; /* Center the tableContainer horizontaly */
}
#header {
  padding-left: 190px; /* The width of your sidebar, to align it with the tableContainer */
}


body {
  background-color: #222219;
  font-family: 'Open Sans', sans-serif;
}

#header h1 {
  color: #F9C80E;
}

#bodyWrapper {
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
}

#header {
  flex: 1 100%;
  align-self: baseline;
  text-align: center;
  padding-left: 190px; /* The width of the sidebar */
}

#sketchButtons {
  flex: 1;
  max-width: 150px;
  display: flex;
  flex-flow: column nowrap;
  padding: 15px;
  margin: 5px;
}

.appButtons {
  padding: 10px 5px;
  margin: 5px;
  border-radius: 15px;
  outline: none;
  background-color: #424729;
  color: white;
  border: none;
  cursor: pointer;
}

.appButtons:hover {
  background-color: white;
  color: #424729;
}

.appButtons:active {
  transform: translateY(4px);
}

#tabletContainer {
  color: white;
  padding: 5px;
  margin: 5px;
  max-width: 800px;
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto; /* Center it */
}

.tabletCanvas {
  box-sizing: border-box;
  float: left;
  min-width: 50px;
  min-height: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid #404040;
  background: white;
}
<div id="bodyWrapper">
        <div id="header">
            <h1>Etch-A-Sketch!</h1>
        </div>
        <div id="sketchButtons">
            <button class="appButtons" id="rainbowButton">Random Colors</button>
            <button class="appButtons" id="clearButton">Reset the Grid</button>
            <button class="appButtons" id="blackButton">Default Colors</button>
        </div>
        <!-- Drawing board gets targeted here -->
        <div id="tabletContainer">
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
            <div class="tabletCanvas"></div>
        </div>
    </div>
0 голосов
/ 15 марта 2019

Один из способов сделать это будет: установить положение .tabletContainers на абсолютное значение, установить поле на авто, установить влево и вправо в 0, а затем установите желаемое свойство top. 

 .tabletContainer {
    position: absolute;
    color: white;
    padding: 5px;
    margin: 5px;
    max-width: 800px;
    display: flex;
    flex-flow: row wrap;
    margin: auto;
    left: 0;
    right: 0;
    top: 111px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...