CODEWITHSUNDEEP
htmlcssflexbox
Andres
Andres

Reputation: 795

How to display a list of items on the right with flexbox?

How can I align a list of item in the right side as a list using flexbox?

something like this?

enter image description here

p {
  display: flex;
  justify-content: space-between;
}
<p>
  <span>List</span>
  <span>3 oranges</span>
  <span>4 apples</span>
  <span>6 bananas</span>
</p>

Upvotes: 3

Views: 167

Answers (5)

Temani Afif
Temani Afif

Reputation: 272947

Without changing your HTML structure you can do like below:

p {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

p span:nth-child(n + 3) {
  width:100%;
  text-align:right;
}
<p>
  <span>List</span>
  <span>3 oranges</span>
  <span>4 apples</span>
  <span>6 bananas</span>
</p>

Upvotes: 2

mahan
mahan

Reputation: 14935

  1. Group the last three <span> in a <p>
  2. Wrap the first <span> and <p> in a <div>

🎁

Use semantic elements: p for paragraphs / text.

1 - justify-content: space-between;

Add space between the two children of the <div>. Hence, the first the <span> and the <p> are pushed to the sides.

div {
  display: flex;
  justify-content: space-between;
}

p {
  display: flex;
  flex-direction: column;

}
<div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

I would use the first approach.

2 - margin-left: auto;

Pushes the <p> to the right.

div {
  display: flex;
}

p {
  display: flex;
  flex-direction: column;
  margin-left: auto;
}
<div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

3 margin-right: auto;

Pushes the <p> to the right.

div {
  display: flex;
}

div > span {
  margin-right: auto;
} 

p {
  display: flex;
  flex-direction: column;
  
}
<div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

4 - flex-grow: 1;

The first <span> takes as much space as available. Hence, <p> is pushed to the right.

div {
  display: flex;
}

div > span {
  flex-grow: 1;
}

p {
  display: flex;
  flex-direction: column;
}
<div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

Upvotes: 3

Cray
Cray

Reputation: 5483

You need to separate the two elements.

Something like this:

.list {
  display: flex;
  justify-content: space-between;
}
<div class="list">
<div>      
<span>List</span>
</div>
<div>
  <div>3 oranges</div>
  <div>4 apples</div>
  <div>6 bananas</div>
</div>
</div>

Upvotes: 3

bee
bee

Reputation: 66

This should do the trick

.cont {
    display: flex;
    justify-content: space-between;
}

.cont div {
    display: flex;
    flex-direction: column;
}
<div class="cont">
  <div>
    <span>List</span>
  </div>
  <div>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </div>
</div>

Upvotes: 2

Bilal Mohammad
Bilal Mohammad

Reputation: 159

<div class="list">
  <span>List</span>
  <div>
  <span>3 oranges</span>
  <span>4 apples</span>
  <span>6 bananas</span>
  </div>

.list {
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
.list div{
  display:flex;
  flex-direction:column;
}

You should wrap the list in a div and then the list items in another div to achieve the layout you want.

Upvotes: 2

Related Questions