Search code examples
htmlcssflexboxalignment

Flexbox - align items left and centered

enter image description here JS Fiddle

body {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 20px;
  text-align: center;
}

span {
  font-size: 14px;
  text-align: left;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

.box7,
.box8 {
  flex-basis: 100%;
  width: 100%;
  justify-content: center;
}

.box {
  height: 50px;
  width: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  flex: 1;
}

input {
  background-color: #f9a558;
  border: 1px solid #fff;
  height: 25px;
  width: 100%;
  flex: 1;
}

.company,
.comments {
  display: flex;
  margin: 5px 5px;
  flex-grow: 3;
  width 100%;
}

.company {
  margin-bottom: 3%;
}

@media (min-width: 426px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }
  .box {
    flex-basis: 45%;
  }
}
<div class="container">
  <div class="box box1"><span>First Name
    <input type="text"></span></div>
  <div class="box box2"><span>Last Name
    <input type="text"></span></div>
  <div class="box box3"><span>Email
    <input type="text"></span></div>
  <div class="box box4"><span>Phone
    <input type="text"></span></div>
  <div class="box box1"><span>City
    <input type="text"></span></div>
  <div class="box box2"><span>State/Province
    <input type="text"></span></div>
</div>

<div class="container">
  <div class=" company"><span>Company
    <input class="company" type="text"></span></div>
</div>

<div class="container">
  <div class="comments"><span>Comments
    <input class="comments" type="text"></span></div>
</div>

I am attempting to center the boxes within my form as demonstrated in the attached picture. How can I get the form boxes to align left and appear side by? As you can see in my jsfiddle, the from boxes are centered, however they do not align correctly nor do they appear side by side.

Solution

  • Try below CSS I think this is for helpfull:

    See Fiddle Demo

    body {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 20px;
  text-align: center;
}

span {
  font-size: 14px;
  text-align: left;
  float: left;
  width: 100%;
}

input[type="text"] {
  float: left;
  width: 98%;
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

.box7,
.box8 {
  flex-basis: 100%;
  width: 100%;
  justify-content: center;
}

.box {
  height: 50px;
  /* width: calc(100% - 20px); */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* font-size: 1.2em; */
  /* flex: 1; */
  float: left;
  width: 48%;
  margin: 2% 1%;
}

(index):38 input {
  background-color: #f9a558;
  border: 1px solid #fff;
  height: 25px;
  width: 100%;
  flex: 1;
}

.company,
.comments {
  display: flex;
  margin: 5px 5px;
  flex-grow: 3;
  width 100%;
}

.company {
  margin-bottom: 3%;
}

@media (min-width: 426px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }
}
    <div class="container">
  <div class="box box1"><span>First Name
    <input type="text"></span></div>
  <div class="box box2"><span>Last Name
    <input type="text"></span></div>
  <div class="box box3"><span>Email
    <input type="text"></span></div>
  <div class="box box4"><span>Phone
    <input type="text"></span></div>
  <div class="box box1"><span>City
    <input type="text"></span></div>
  <div class="box box2"><span>State/Province
    <input type="text"></span></div>
</div>

<div class="container">
  <div class=" company"><span>Company
    <input class="company" type="text"></span></div>
</div>

<div class="container">
  <div class="comments"><span>Comments
    <input class="comments" type="text"></span></div>
</div>

    CSS:

    span {
    font-size: 14px;
    text-align: left;
    float: left;
    width: 100%;
}

input[type="text"] {
    float: left;
    width: 100%;
    padding: 10px;
}

.box {
    height: 50px;
    float: left;
    width: 48%;
    margin: 2% 1%;
}