How to remove the empty space between elements?-CodePudding

I have made a calculator using one parent div and plenty of child divs, the children are in html. After that I styled it using flex-box and it is almost done; nevertheless there is an empty space between first div (.result) and the rest of the divs (.btn).

I want to remove that empty space which is shown in picture below:

I tried to use flex-box method to arrange these div elements like blocks.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  margin: 0 auto 0 auto;
  background-color: gray;
  text-align: center;
  margin-bottom: 5vh;
}

.kalkulator {
  display: flex;
  flex-wrap: wrap;
  height: 50vh;
  width: 30vw;
  margin: 0 auto 0 auto;
}

.kalkulator .result {
  flex-basis: 100%;
  height: 10vh;
  background-color: #333;
}

.kalkulator div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 33%;
  background-color: #666;
  border: 1px solid black;
}

.btn:nth-last-child(2),
.btn:nth-last-child(1) {
  flex-basis: 50%;
}

<h1>kalkulator</h1>
<div >
  <div >wynik</div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div > </div>
  <div >0</div>
  <div >-</div>
  <div >/</div>
  <div >.</div>
  <div >*</div>
  <div >C</div>
  <div >=</div>
</div>

CodePudding user response：

Apply align-content: flex-start to the flex container.

The default setting is align-content: stretch, which will spread the items across the container. With flex-start, they'll be packed together at the top.

Your code:

.kalkulator {
  display: flex;
  flex-wrap: wrap;
  height: 50vh;
  width: 30vw;
  margin: 0 auto 0 auto;
  border: 2px dashed red;
  background-color: yellow;
}

.kalkulator .result {
  flex-basis: 100%;
  height: 10vh;
  background-color: #333;
}

.kalkulator div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 33%;
  background-color: #666;
  border: 1px solid black;
}

.btn:nth-last-child(2),
.btn:nth-last-child(1) {
  flex-basis: 50%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  margin: 0 auto 0 auto;
  background-color: gray;
  text-align: center;
  margin-bottom: 5vh;
}

<h1>kalkulator</h1>
<div >
  <div >wynik</div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div > </div>
  <div >0</div>
  <div >-</div>
  <div >/</div>
  <div >.</div>
  <div >*</div>
  <div >C</div>
  <div >=</div>
</div>

Modified code:

.kalkulator {
  display: flex;
  flex-wrap: wrap;
  height: 50vh;
  width: 30vw;
  margin: 0 auto 0 auto;
  border: 2px dashed red;
  background-color: yellow;
  align-content: flex-start;
}

.kalkulator .result {
  flex-basis: 100%;
  height: 10vh;
  background-color: #333;
}

.kalkulator div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 33%;
  background-color: #666;
  border: 1px solid black;
}

.btn:nth-last-child(2),
.btn:nth-last-child(1) {
  flex-basis: 50%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  margin: 0 auto 0 auto;
  background-color: gray;
  text-align: center;
  margin-bottom: 5vh;
}

<h1>kalkulator</h1>
<div >
  <div >wynik</div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div > </div>
  <div >0</div>
  <div >-</div>
  <div >/</div>
  <div >.</div>
  <div >*</div>
  <div >C</div>
  <div >=</div>
</div>

CodePudding user response：

It seems too much for one flexbox. Create the layout with two nested ones: one for the vertical partition of the calculator to the result and the buttons, and another one for the fluid positioning of the buttons within the buttons div:

<div >
  <div >wynik</div>
  <div >[...]</div>
</div>

.kalkulator {
  display: flex;
  flex-direction: column;
}

.result {
  flex-basis: 10vh;
}

.buttons {
  flex-grow: 1; /* Fill the rest */
  display: flex;
  flex-wrap: wrap;
}

.btn {
  flex-grow: 1;
  flex-basis: 33%;
  justify-content: center;
  align-items: center;
  display: flex;
}

CodePudding user response：

See the following code, here I removed height: 50vh; property from .kalkulator class:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  margin: 0 auto 0 auto;
  background-color: gray;
  text-align: center;
  margin-bottom: 5vh;
}

.kalkulator {
  display: flex;
  flex-wrap: wrap;
  /* height: 50vh; */
  width: 30vw;
  margin: 0 auto 0 auto;
}

.kalkulator .result {
  flex-basis: 100%;
  height: 10vh;
  background-color: #333;
}

.kalkulator div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 33%;
  background-color: #666;
  border: 1px solid black;
}

.btn:nth-last-child(2),
.btn:nth-last-child(1) {
  flex-basis: 50%;
}

<h1>kalkulator</h1>
<div >
  <div >wynik</div>
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div > </div>
  <div >0</div>
  <div >-</div>
  <div >/</div>
  <div >.</div>
  <div >*</div>
  <div >C</div>
  <div >=</div>
</div>

Viewport Height (vh): This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

CodePudding user response：

Height of container is 50vh and height of result is 10vh. This leaves 40vh for button panel, or 6.67vh per row. If you want to preserve container height, you can just add height: 6.67vh; to .kalkulator div. This will set button height to fixed value, so there won't be any empty space.