Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Create responsive column of square items with flexbox

Tags:

html

css

flexbox

Hei, im trying to create a simple responsive gameboard layout. Im using flexbox to keep it responsive and managed to to get it to work very nice in the big 2x7 and 7x7 game area. When page gets resized the "squares" get smaller and still maintain the correct their square look very nicely. I tried to apply the same method to create a sideboard what i would like to be 1x7 squares and also keep their "squarness" but when the width gets smaller the boxes start to expand out sideways.

@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 class="game-container">
        <div class="game-area-container">
            <div class="header-container">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box ball-effect" style="background-color: green;"></div>
                <div class="box ball-effect" style="background-color: green;"></div>
            </div>
            <div class="gameboard-container">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box ball-effect" style="background-color: green;"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box ball-effect" style="background-color: green;"></div>
                <div class="box ball-effect" style="background-color: green;"></div>
            </div>
        </div>
        <div class="progress-container">
            <span class="score-container">Score: 90000</span>
            <div class="levels-container">
                <div class="level-box" style="background-color: black;"></div>
                <div class="level-box" style="background-color: salmon;"></div>
                <div class="level-box" style="background-color: gray ;"></div>
                <div class="level-box" style="background-color: darkgoldenrod;"></div>
                <div class="level-box" style="background-color: aqua;"></div>
                <div class="level-box" style="background-color: violet;"></div>
                <div class="level-box" style="background-color: blue;"></div>
                <div class="level-box" style="background-color: red;"></div>
                <div class="level-box" style="background-color: yellow;"></div>
                <div class="level-box" style="background-color: green;"></div>
            </div>
        </div>
    </div>

Here's a codepen of my current solution: My current solution in codepen

like image 941
hs2d Avatar asked Jan 21 '21 11:01

hs2d

People also ask

How do you make a flex column responsive?

To change the row into a column, all we have to do is to use flex-direction property and set its value to column . So the div elements inside the section block sit below instead of beside each other. That's it for mobile layout!

How do I make columns in flexbox?

Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.

How do you make a square box flex?

Making square tiles with flexbox is simple! Just add flex-wrap and width , and everything will magically work as together!

1 Answers

Here is a modified version of your code that should give you a better approximation. Still not perfect due to the text but you will always have square shapes. You will note the use the min() function, I have also replaced margin with white border to include them in the width and avoid overflow.

@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 class="game-container">
  <div class="game-area-container">
    <div class="header-container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box ball-effect" style="background-color: green;"></div>
      <div class="box ball-effect" style="background-color: green;"></div>
    </div>
    <div class="gameboard-container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box ball-effect" style="background-color: green;"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box ball-effect" style="background-color: green;"></div>
      <div class="box ball-effect" style="background-color: green;"></div>
    </div>
  </div>
  <div class="progress-container">
    <span class="score-container">Score: 90000</span>
    <div class="levels-container">
      <div class="level-box" style="background-color: black;"></div>
      <div class="level-box" style="background-color: salmon;"></div>
      <div class="level-box" style="background-color: gray ;"></div>
      <div class="level-box" style="background-color: darkgoldenrod;"></div>
      <div class="level-box" style="background-color: aqua;"></div>
      <div class="level-box" style="background-color: violet;"></div>
      <div class="level-box" style="background-color: blue;"></div>
      <div class="level-box" style="background-color: red;"></div>
      <div class="level-box" style="background-color: yellow;"></div>
      <div class="level-box" style="background-color: green;"></div>
    </div>
  </div>
</div>

If you can update you html, here is another idea using CSS grid:

@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 class="game-container">
  <div class="header-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box ball-effect" style="background-color: green;"></div>
    <div class="box ball-effect" style="background-color: green;"></div>
  </div>
  <div class="gameboard-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box ball-effect" style="background-color: green;"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box ball-effect" style="background-color: green;"></div>
    <div class="box ball-effect" style="background-color: green;"></div>
  </div>
  <span class="score-container">Score: 90000</span>
  <div class="levels-container">
    <div class="level-box" style="background-color: black;"></div>
    <div class="level-box" style="background-color: salmon;"></div>
    <div class="level-box" style="background-color: gray ;"></div>
    <div class="level-box" style="background-color: darkgoldenrod;"></div>
    <div class="level-box" style="background-color: aqua;"></div>
    <div class="level-box" style="background-color: violet;"></div>
    <div class="level-box" style="background-color: blue;"></div>
    <div class="level-box" style="background-color: red;"></div>
    <div class="level-box" style="background-color: yellow;"></div>
    <div class="level-box" style="background-color: green;"></div>
  </div>
like image 170
Temani Afif Avatar answered Oct 20 '22 07:10

Temani Afif
Sign in to Comment

Related questions

How to push fixed-bottom footer in bootstrap 4 below the page content?
How to detect ads?
Why is a div longer than several spans with the same content (only in Chrome)
Semantic UI Dropdown 'setup menu' fails
Can't seek through video from Rails Active Storage with Rails-Webpacker React Frontend
How to display Icon in select options tag
How to show full text and wrap in menu item in angular material
Select all child checkboxes, checked them and save their value
DataTable.js doesn't load properly when using TABS
How to prevent contents of nested DIV from overflowing parent when parent is resizable?
jQuery/js wrap near div with same classes into single div
Check if an element IS an offsetParent
Rendering/Flickering/Glitch issue in Chrome using CSS 'backdrop-filter:blur'
Selectpicker causes Jquery .on('change') to trigger twice
div Height is not 100% in next.js [duplicate]
How to use Font Awesome icons in python plotly dash
Does rel="home" on an anchor tag (<a>) do anything helpful?
What sites are using my GitHub hosted script?
CSS Grid. Hide unused area
Click on Menu Navigation animate to that Section

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!