CSS - 将Flex容器的子项与屏幕中心对齐，使其无法正常工作

问题描述 投票：-1回答：3

我正在制作一个小型的Etch-a-Sketch-esque网页。

现在，我只是想在获取指定大小的画布的Javascript之前获取页面的CSS，所以我在网页上静态使用16x16网格div。

到目前为止，请参阅this codepen。很抱歉这个漫长的HTML，就像我现在所说的那样，我只是在处理格式化并放入一个16x16网格（800px by 800px）的div与类.tabletCanvas。基本上，只有256个具有该类的div。

正如你所看到的，“画布”贴在左侧，我希望它看起来像in this picture（使用photoshop在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，但这似乎也是一种非常错误和糟糕的方法。

任何和所有的帮助将不胜感激。

css css3 flexbox
3个回答
0
投票

一种方法是：将.tabletContainers位置设置为绝对，将margin设置为auto，将left和right设置为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;
}
1
投票

我用简化的造型制作了你的表壳的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
投票

如果您只想将网格水平居中，这是一个简单的解决方案：

#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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.