CODEWITHSUNDEEP
javascripthtmlcssflexbox
code
code

Reputation: 2163

How to add empty space after flex item?

Let's say the page is cut horizontally into three equal pieces. With that in mind, I want to use flexbox to place an image in the first piece (or a child of the flex container), place an input field in the second piece, and leave the third piece empty.

I am not able to position the input field at the center of the page while making the image lie in the top piece.

I have tried using flex-basis:space-between but it moves the second input field to the bottom of the screen, which is obvious since I only have two child items.

Note: Adding an empty div works, but is that considered best practice?

The code is as below:

body {
    margin: 0;
    padding: 0;
    font-family: "Raleway";
}

.root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
}

#enter-name {
    border: none;
    font-size: 1em;
    /* border-bottom: 1px solid rgb(206, 206, 206); */
    padding: 0.5em;
    background: #f7f7f7;
}

::-webkit-input-placeholder {
    color: #d3d3d3;
}

textarea:focus, input:focus {
    outline: none;
}

.input-form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.input-form > p{
    align-self: flex-end;
    color:rgb(143, 143, 143);
}

.root > img{
    width:2em;
    height:2em;
}
<div class="root">
    <img src="https://cdn.freebiesupply.com/logos/large/2x/open-source-logo-png-transparent.png" alt="">
    <div class="input-form">
        <input id="enter-name" placeholder="Search for tomriddle" type="text" autofocus>
        <p>Press Enter</p>
    </div>
</div>

Upvotes: 3

Views: 2616

Answers (2)

Suraj Libi
Suraj Libi

Reputation: 515

Try this

body {
    margin: 0;
    padding: 0;
    font-family: "Raleway";
}

.root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
}

#enter-name {
    border: none;
    font-size: 1em;
    /* border-bottom: 1px solid rgb(206, 206, 206); */
    padding: 0.5em;
    background: #f7f7f7;
}

::-webkit-input-placeholder {
    color: #d3d3d3;
}

textarea:focus, input:focus {
    outline: none;
}

.input-form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.image-padding{
  padding: 1em 0;
}
.input-form > p{
    align-self: flex-end;
    color:rgb(143, 143, 143);
}

.root > img{
    width:2em;
    height:2em;
}
<div class="root">
    <img src="https://cdn.freebiesupply.com/logos/large/2x/open-source-logo-png-transparent.png" alt="" class="image-padding">
    <div class="input-form">
        <input id="enter-name" placeholder="Search for tomriddle" type="text" autofocus>
        <p>Press Enter</p>
    </div>
</div>

Upvotes: 0

fen1x
fen1x

Reputation: 5870

You can use .root:after with content: ''; as a third flex-child:

body {
  margin: 0;
  padding: 0;
  font-family: "Raleway";
}

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  flex-basis: 100%;
}
.root:after {
  content: '';
}
#enter-name {
  border: none;
  font-size: 1em;
  /* border-bottom: 1px solid rgb(206, 206, 206); */
  padding: 0.5em;
  background: #f7f7f7;
}

::-webkit-input-placeholder {
  color: #d3d3d3;
}

textarea:focus,
input:focus {
  outline: none;
}

.input-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.input-form>p {
  align-self: flex-end;
  color: rgb(143, 143, 143);
}

.root>img {
  width: 2em;
  height: 2em;
}
<div class="root">
  <img src="https://cdn.freebiesupply.com/logos/large/2x/open-source-logo-png-transparent.png" alt="">
  <div class="input-form">
    <input id="enter-name" placeholder="Search for tomriddle" type="text" autofocus>
    <p>Press Enter</p>
  </div>
</div>

Upvotes: 4

Related Questions