Home > Blockchain >  Flex grid to move last flex-item to the right
Flex grid to move last flex-item to the right

Time:12-23

I have a parent div, containing 3 children, i want to show them beside each other, except for the last div to be in a new line but to the right, under the div , how can this be done?

.form-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.form-row .form-label {
  width: 35%;
}

.form-row .form-field {
  width: 65%;
}
<div >
  <label >Your message</label>
  <div >
    <textarea name="message"></textarea>
  </div>
  <div >
    <p>You can write your message here</p>
  </div>
</div>

CodePudding user response:

Use same with for .form-field and .form-message and justify-content: flex-end; for .form-row

.form-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-end;
}
.form-label {
  width: 35%;
}
.form-field, .form-message {
  width: 65%;
}
<div >
   <label >Your message</label>
   <div >
       <textarea name="message"></textarea>
   </div>
   <div >
      <p>You can write your message here</p>
   </div>
</div>

  • Related