Help with Flexbox aligning

1

I am creating a list of stores that accept Bitcoin as payment in my city. I am trying to use flexbox to align child divs inside a parent. Specifically I want to align a store number to the left of the parent div. I have read the guide to using flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and believe that my code is correct and my heirarchy is set up properly but for some reason the number wants to align below the other content in the div. My code is as follows…

HTML


<div class="stores-list-container">
            <div class="stores-list">
                <div class="store-container">
                    <div class ="store-info-container">
                        <div class="store-address">
                            8480 Beverly Blvd <br>
                            Los Angeles, CA 90048
                        </div>
                            <div class="store-phone-number">356-345-4654</div>
                                <div class="store-number-container">
                                    <div class="store-number">
                                        1
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>

CSS

.stores-list-container {
    width: 400px;
    background-color: white;
    position: absolute;
    z-index: 10;
    top: 320px;
    left: 100px;
    border-radius: 30px;
    bottom: 20px;
}

.stores-list {
    padding-left: 20px;
    padding-right: 20px;
    overflow-y: scroll;
    height: 100%;
}

.store-container {
    display: flex;
    border-bottom: 2px solid grey;
}

.store-info-container {
    flex-grow: 1;
}

.store-address {
    font-size: 21px;
    color: #514C4C;
    margin-top: 30px;
}

.store-phone-number {
    font-size: 18px;
    color: grey;
    margin-top: 15px;
    margin-bottom: 15px;
}

.store-number-container {
    align-items: center;
    display: flex;
}

I believe (If I am not mistaken) that setting flex-grow to 1 inside the store-info-container SHOULD HAVE pushed the store-number-container to the right of the div and then the CSS for the store-number-container SHOULD HAVE aligned the store number to the center horizontally; however it is currently stuck justified to the left and underneath the store-phone-number.

2

Did you want something like this?

I removed some (what seemed like) classes not needed for the UI you described to happen and cleaned up the CSS. You were using flex correctly, but the divs were not positioned in a way that it would affect the HTML in the way that you wanted.

3

@singhshemona probably provided more accurate solution but when I did it here is mine too https://codepen.io/Dorfieeee/pen/abveqPY

1 Like
4

I think you’re still a lot confused about how flex-box works.
It suppouse to be used for only one dimension solutions as row or column.
And of coarse, you can nest them.

2 Likes
5

It might also help to use classes sparingly and when you do, pick a more concise identifier.

store-phone-number, store-number-container and store-number all sound pretty similar and if you’re editing something quickly it could lead to some typos. :slight_smile:

1 Like
6

Thank you for all the help. I got it working as expected now. I’m almost done with the project too. Here is the correct formatting I was after. :slight_smile:
This was my first time trying FlexBox. I like it!

example
example494×881 67.6 KB

1 Like
7

Looks great! Nice work :+1:

1 Like
8

We’re glad we could help.
Btw, here’s great book about HTML and CSS.
It explains semantic html and all so needed responsive emelents so easily it stucks in your head immediately.
Responsive Web Design with HTML5 and CSS - Third Edition

2 Likes