2

I am styling a cart in angular. I am trying to get the price to be all the way to the right of the cart however it is not applying.

I tried using space-between and I tested it on the outer div and it worked, but when I try to apply on the inner div it doesn't work. What am I missing or just plain not understanding here?

here is a pen of the code https://codepen.io/awschneider-dev/pen/rNedLJg

HTML Below

<div class="container">
    <h2>Cart</h2>
    <div class="cartProducts" *ngFor="let item of items">
        <!-- <input type="checkbox" name="deleteItem" id=""> -->
        <hr>
        <div class="item">
            <div class="itemImage">
                <img class="productImage" src="../../assets/images/phones/{{item.image}}" alt=""/>
            </div>
            <div class="information">
                <div class="description">
                    <a href="#" class="fakeLink">Link to Item Page</a>
                </div>
                <div class="price">
                    {{item.price | currency}}
                </div>
            </div>
        </div>
    </div>
</div>

CSS Below

div.item{
    display: flex;
    
}

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

div.container{
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

div.itemImage{
    min-width: 150px;
}

img.productImage{
    max-width: 100px;
    max-height: 150px;
    margin: 10px;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1.0em;
    margin-right: 1.0em;
    border-style: inset;
    border-width: 1px;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
  } 

  a.fakeLink{
      font-weight: 750;
      font-size: larger;
      text-decoration: none;
      color: #0645AD;
  }

Resources I accessed below.

How to fix flex box with justify-content space between

Justify-content: space-between works incorrect

Any and all help would be appreciated.

Adam Schneider
  • 163
  • 1
  • 12

2 Answers2

2

To make it work, you can set the width of div.information.

For example:

div.information{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%; /* use any value you want */
}
Julio Suriano
  • 141
  • 1
  • 1
  • 7
2

Add the following property in your css rule:

div.information{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-grow: 2; // add this line
}
snsakib
  • 1,062
  • 9
  • 14