Why is align-items: flex-start aligning horizontally when im trying to align vertically in a column

Question

I have this html code

<div className="sidebar">
                <div routerLink="" className="navbar-brand">
                    <img alt="" src={brand} width="60" height="60" />
                </div>

                <ul className="nav navbar-nav">
                    <li>
                        {/* Home icon */}
                        <div className="divicon" onClick={() => window.location = "http://localhost:3000"}>
                            <svg className="svgicon-sidebar" viewBox="0 0 14 14" >
                              blahblah
                            </svg>
                        </div>
                    </li>

                    <li>
                        <div className="divicon">
                            <svg className="svgicon-sidebar" viewBox="0 0 14 14">
                            blahblah
                            </svg>
                        </div>
                    </li>
                </ul>
            </div>

But in my css, even if I put flex-direction: column, and I see a proper column, with the ul elements, whenever i try to apply flex-start, its aligns the items horizontally instead of vertically as it should since its a column

    .nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

https://jsfiddle.net/dgupvr6h/ have you tried inspecting the item and see if anything is overriding it? — Huangism, Jan 27 '20 at 13:25
because it consider the cross axis and for column it's row (horizontal) — Temani Afif, Jan 27 '20 at 13:28

score 1 · Accepted Answer · answered Jan 27 '20 at 13:29

1

Use

justify-content: flex-start;

It changes based on the flex-direction

answered Jan 27 '20 at 13:29

JoshuaK98

381
1
2
11

Why is align-items: flex-start aligning horizontally when im trying to align vertically in a column

1 Answers1