使用flexbox创建方形项目的响应列

html5 • • 问答

嘿，我正在尝试创建一个简单的响应式游戏板布局。我使用 flexbox 来保持响应，并设法让它在大型 2x7 和 7x7 游戏区域中工作得非常好。当页面被调整大小时，“方块”会变小，但仍然保持正确的方块外观。我尝试应用相同的方法来创建一个我想要的 1x7 正方形的餐具柜，并保持它们的“方形”，但是当宽度变小时，盒子开始向侧面扩展。

@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');

body {
    margin: 0;
}

.game-container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    //height: 90vh;
}

.game-area-container {
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    max-width: 75vh;
    width: 75vh;
    flex: 1;
}

.header-container {
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    min-width: 350px;
}

.gameboard-container {
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    min-width: 350px;
}

.progress-container {
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    max-width: min-content;
    flex: 1;
}

.score-container {
    border: 2px solid black;
    color: #acacac;
    text-align: center;
    font-family: 'Black Ops One', cursive;
    font-size: 2rem;
}

.levels-container {
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
    max-width: 10vh;
}

.level-box {
    flex: 1;
    margin: 2px;
    background: #E9D2FF;
}
  
.level-box:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.box {
    flex: 1 0 13%;
    margin: 2px;
    background: #E9D2FF;
}
  
.box:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}
<div>
        <div>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div>
            <span>Score: 90000</span>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>

回答

这是您的代码的修改版本，应该可以为您提供更好的近似值。由于文字的原因仍然不完美，但您将始终拥有方形。您会注意到该min()函数的使用，我还用白色边框替换了边距以将它们包含在宽度中并避免溢出。

@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
body {
  margin: 0;
}

.game-container {
  display: flex;
  flex-direction: row;    
  max-width: 90vh;
}

.game-area-container {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header-container,
.gameboard-container {
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
}

.progress-container {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  max-width: min-content;
  flex: 1;
}

.score-container {
  border: 2px solid black;
  color: #acacac;
  text-align: center;
  font-family: 'Black Ops One', cursive;
  font-size: min(4vmin, 2rem);
}

.levels-container {
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  height: 0;
  width: 10.2vw;
  max-width: min(90px, 9vh);
  align-content: flex-start;
}

.level-box {
  width: 100%;
  border: 2px solid #fff;
  background: #E9D2FF;
}

.level-box:after,
.box:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.box {
  flex: 1 0 13%;
  background: #E9D2FF;
  border: 2px solid #fff;
}

* {
  box-sizing: border-box;
}
<div>
  <div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div>
    <span>Score: 90000</span>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

如果你可以更新你的 html，这是使用 CSS 网格的另一个想法：

@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
.game-container {
  display: grid;
  max-width: 90vh;
}
.game-container > * {
  border: 2px solid black;
}

.header-container,
.gameboard-container {
  display: grid;
  grid-template-columns: repeat(7, 10vmin);
  grid-auto-rows: 10vmin;    
}

.score-container {
  color: #acacac;
  text-align:center;
  font-family: 'Black Ops One', cursive;
  font-size: min(4vmin, 2rem);
  grid-area: 1/2;
}

.levels-container {
  display: grid;
  grid-template-columns: 7vmin;
  grid-auto-rows: 7vmin;  
}

.level-box,
.box{
  background: #E9D2FF;
  margin: 2px;
}
<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <span>Score: 90000</span>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  • What a perfect answere, not only showing me how to fix my css but it also gives another way of getting same result. Thank you!

以上是使用flexbox创建方形项目的响应列的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容