Why are the boxes going vertically? I want them to be going horizontally-CodePudding

I've messed around with flex direction column vs row but no success. I've also haphazardly tried to add or remove different characteristics but the only thing I can change is the size of the box row, not the direction or the distance between.

The boxes should be going horizontally with a gap in between of 5px.

The boxes in question are stored in .squares variable, and are coded in using JS. Code below.

  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

#container {
  display: flex;
  background-color: #282c34;
  height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

#game {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  border-bottom: 1px solid rgb(58, 58, 60);
}

.title {
  color: gainsboro;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0.4rem 0 0.4rem 0;
  text-align: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

#board-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column;
}

#board {
  grid-gap: 5px;
  width: 636px;
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
  align-content: flex-start;
}

.square {
  display: grid;
  border: 1px solid rgb(255, 255, 255);
  grid-gap: 5px;
  flex-direction: row;
  width: 60px;
  height: 60px;

}

.board-row-2 {
  width: 636px;
  height: 300px;
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: hidden;
}

.board-row-3 {
  width: 636px;
  height: 300px;
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: hidden;
}

#keyboard-container {
  height: 330px;
  width: 340px;
  align-items: center;
  padding: 10px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto 8px;
  touch-action: manipulation;
}

.keyboard-row button {
  font-family: inherit;
  font-weight: bold;
  border: 0;
  padding: 0;
  width: 80px;
  height: 58px;
  cursor: pointer;
  background-color: rgb(217, 202, 191);
  color: black;
  text-transform: uppercase;
  margin-right: 6px;
  border-radius: 4px;
  user-select: none;
  align-items: center;
}

.keyboard-row button.zero-button {
  width: 166px;
}

.keyboard-row button.equals-button {
  width: 166px;
  background-color: rgb(100, 230, 110);
}
.keyboard-row button.cancel-button {
  background-color: rgb(255, 153, 153);
}

.keyboard-row button.all-cancel-button {
  background-color: rgb(255, 51, 51);
}

.keyboard-row button.operator-button {
  background-color: rgb(177, 197, 211);
  color: black;
}

.spacer-half {
  flex-grow: 0.5;
}

document.addEventListener("DOMContentLoaded", () => {
    createSquares1();
    //createSquares2()
    //createSquares3()

    function createSquares1(){
        const gameBoard1 = document.getElementById("board-row-1");

        for (let index = 0; index < 9; index  ) {
            let square = document.createElement("div");
            square.classList.add("square");
            square.setAttribute("id", index   1);
            gameBoard1.append(square);
        }
    }

    function createSquares2() {
        const gameBoard2 = document.getElementById("board-row-2");
        for (let index = 0; index < 9; index  ) {
            let square = document.createElement("div");
            square.classList.add("square");
            square.setAttribute("id", index   1);
            gameBoard2.append(square);
        }
    }

    function createSquares3() {
        const gameBoard3 = document.getElementById("board-row-3");
        for (let index = 0; index < 9; index   ) {
            let square = document.createElement("div");
            square.classList.add("square");
            square.setAttribute("id", index  1);
            gameBoard3.append(square);
        }
    }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Do Sum Math</title>

    <script src="index.js"></script>

    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
  </head>
  <body>
    <div id="container">
      <div id="game">
        <header>
          <h1 >DO SUM MATH</h1>
        </header>

        <div id="board-container">
          <div id="board">
            <div id="board-row-1">
            </div>
            <div id="board-row-2">
              <div id="number-square-5"></div>
              <div id="operator-square-4"></div>
              <div id="number-square-6"></div>
              <div id="operator-square-5"></div>
              <div id="number-square-7"></div>
              <div id="operator-square-6"></div>
              <div id="number-square-8"></div>
              <div id="equal-sign-2"></div>
              <div id="target-square-2"></div>
            </div>
            <div id="board-row-3">
              <div id="number-square-9"></div>
              <div id="operator-square-7"></div>
              <div id="number-square-10"></div>
              <div id="operator-square-8"></div>
              <div id="number-square-11"></div>
              <div id="operator-square-9"></div>
              <div id="number-square-12"></div>
              <div id="equal-sign-3"></div>
              <div id="target-square-3"></div>
            </div>
          </div>

        <div id="keyboard-container">
          <div >
            <div ></div>
            <button data-key="C" >C</button>
            <button data-key="AC" >AC</button>
            <button data-key="( )">( )</button>
            <button data-key=" " > </button>
          </div>
          <div >
            <div ></div>
            <button data-key="7">7</button>
            <button data-key="8">8</button>
            <button data-key="9">9</button>
            <button data-key="-" >-</button>
          </div>
          <div >
            <div ></div>
            <button data-key="4">4</button>
            <button data-key="5">5</button>
            <button data-key="6">6</button>
            <button data-key="x" >*</button>
          </div>
          <div >
            <div ></div>
            <button data-key="1">1</button>
            <button data-key="2">2</button>
            <button data-key="3">3</button>
            <button data-key="/" >/</button>
          </div>
          <div >
            <div ></div>
            <button data-key="0" >0</button>
            <button data-key="=" >=</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

I added display: flex property to board-row elements and now they are going vertically. You have to write display: flex code to the parent of divs directly that you would like to change.

here is the CSS code:

#board-row-1, #board-row-2, #board-row-3 {
display: flex;
gap: 5px;
}

CodePudding user response：

Is that what you are trying to accomplish?

https://jsfiddle.net/5wspnjmg/11/

#board-row-1 {
  display: flex;
  gap: 5px;
}

or for every row

#board div {
  display: flex;
  gap: 5px;
}

to use flex (or grid) display: flex/gird has to be set on the parent element therefore .squares { display: grid; } does not contribute to laying out the squares. It says that you want a grid layout within the squares.