0

So I have a list something like this:

.ul-employee {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 100%;
  justify-content: space-around;
}

.li-employee {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 400px;
}
<ul class="ul-employee">
  <li class="li-employee">
    <h3>Employee Name</h3>
    <p>Salary</p>
    <p>Position</p>
  </li>
  <li *ngFor="let employee of employees" class="li-employee">
    <h3>{{ employee.name }}</h3>
    <p>${{ employee.salary }} / hour</p>
    <p>{{ positions[employee.position] }}</p>
  </li>
</ul>

The result is this

The list is in a container with width of 400px, the list takes 100% of the width space and so does the list items. I tried doing text-align: left; but that doesn't seem to work.

How do I make it so it's aligned more like:
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
instead of one more to the right and another more to the left?

1
  • 1
    do you want it to space it evenly ? Aug 29, 2020 at 16:43

2 Answers 2

0

You need 2-dimension layout. Flex is for 1-Dimension layout.

You need display: grid;

0

display:table; seems more appropriate than display:flex here if that's not a real table ... :

.ul-employee {
  display: table; 
  text-align: left;
  height: 100%; 
}

.li-employee {
  display: table-row;
  width: 400px;
}
.li-employee > * {
display:table-cell;
border:solid;
padding:0.25em;
<ul class="ul-employee">
  <li class="li-employee">
    <h3>Employee Name</h3>
    <p>Salary</p>
    <p>Position</p>
  </li>
  <li *ngFor="let employee of employees" class="li-employee">
    <h3>{{ employee.name }}</h3>
    <p>${{ employee.salary }} / hour</p>
    <p>{{ positions[employee.position] }}</p>
  </li>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.