Question 276042 in Html Question posted in
Some basic documentation can be found here.

Html – Css Flex Wrap Column and justify left

List all li in direction columns on overflow wrap and justify to left

As you can see the attached code A4(li) aligned more to right.

Columns are not justified left. I want columns to be justified left.

How to align columns justify left?

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: start;
  align-items: center;
}

.seating_list {
  list-style-type: none;
  display:flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  gap: 10px;
  width: 500px;
  overflow-x: auto;
  justify-content: flex-start;
  margin: 0px;
  padding: 0px;
}
.seating_list li {
  width:80px;
}
.seating_list li label{
  font-weight: bold;  
  padding-right: 10px;
}

.seating_list li input {
  width:30px;
  border: 1px solid #6e6e6e;
  border-radius: 3px;
}
<ul class="seating_list">
    <li><label>A1</label><input type="text">
    <li><label>A2</label><input type="text">
    <li><label>A3</label><input type="text">
    <li><label>A4</label><input type="text">
    
    
    </ul>
body {
  background: #6e28d9;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: start;
  align-items: center;
}

.seating_list {
  list-style-type: none;
  display:flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  gap: 10px;
  width: 500px;
  overflow-x: auto;
  justify-content: flex-start;
  margin: 0px;
  padding: 0px;
}
.seating_list li {
  width:80px;
}
.seating_list li label{
  font-weight: bold;  
  padding-right: 10px;
}

.seating_list li input {
  width:30px;
  border: 1px solid #6e6e6e;
  border-radius: 3px;
}
<ul class="seating_list">
    <li><label>A1</label><input type="text">
    <li><label>A2</label><input type="text">
    <li><label>A3</label><input type="text">
    <li><label>A4</label><input type="text">
    <li><label>A5</label><input type="text">
    <li><label>A6</label><input type="text">
    <li><label>A7</label><input type="text">
    
    </ul>
Tags:

2

Answers


  1. 0

    Just replace align-items: flex-start with align-content: flex-start will get your issue resolved.

    body {
  background: #6e28d9;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: start;
  align-items: center;
}

.seating_list {
  list-style-type: none;
  display:flex;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  gap: 10px;
  width: 500px;
  overflow-x: auto;
  justify-content: flex-start;
  margin: 0px;
  padding: 0px;
}
.seating_list li {
  width:80px;
}
.seating_list li label{
  font-weight: bold;  
  padding-right: 10px;
}

.seating_list li input {
  width:30px;
  border: 1px solid #6e6e6e;
  border-radius: 3px;
}
    <ul class="seating_list">
    <li><label>A1</label><input type="text">
    <li><label>A2</label><input type="text">
    <li><label>A3</label><input type="text">
    <li><label>A4</label><input type="text">
    <li><label>A5</label><input type="text">
    <li><label>A6</label><input type="text">
    <li><label>A7</label><input type="text">
    
    </ul>
    Login or Signup to reply.
  2. 0 
    <li>
<div>
    <label>A1</label>
</div>
<div>
    <input type="text"/>
</div>

    .seating_list li {
width: 80px;
display: flex;
justify-content: space-between;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search