Flex Items Moving Up/Down, not Left/Right in a Flex Box With Flex-Direction Row Set

Question

I would like to update my header to use flex box. I want to have an icon, then 4 A tag links on the left, and then two tags on the right with an image inside of them. When I go to set align-self on any of the items it moves up and down, not left and right as I was expecting. Please help.

function renderSections() {
        return sections.map((section, i) => {
            let sect = section.toString();
            if (i !== 0) {
                return (
                    <p className="HeadLink" onClick={() => scrollToSection(sect)}>
                        {section}
                    </p>
                );
            } else {
                return (
                    <p className="HeadLink" key={section}>
                        {section}
                    </p>
                );
            }
        });
    }

return (
        <HeadCon id="HeadCon">
            <img alt="logo" className="logo" src={logo} />
            {renderSections()}
            <a className="project-icon-link" href="/#/weather">
                <img alt="Gove Weather" className="project__icon" src={weather} />
            </a>
            <a className="project-icon-link" href="/#/SuperHeroSmackDown">
                <img
                    alt="Super Hero Smack Down"
                    className="project__icon"
                    src={superHSD}
                />
            </a>
        </HeadCon>
    );

export const HeadCon = styled.div`
    * {
        box-sizing: border-box;
    }

    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
    text-align: left;
    height: 70px;
    top: 0;
    right: 0;
    left: 0;
    /* border: 2px solid orange; */
    background: black;

.project-icon-link {
        align-self: flex-end;
    }

Answer 1

I don't think this can be done with align-self. Put margin-left: auto on the first element that's supposed to be on the right, or margin-right: auto on the last element on the left. Alternatively, wrap the left side and the right side in their own flex containers and put justify-content: space-between on the flex container housing the left and right flex containers.