时间戳

首页 > 解决方案 > Flex 项目在具有 Flex-Direction 行集的 Flex Box 中向上/向下移动，而不是向左/向右移动

reactjs - Flex 项目在具有 Flex-Direction 行集的 Flex Box 中向上/向下移动，而不是向左/向右移动

问题描述

我想更新我的标题以使用弹性框。我想要一个图标，然后在左边有 4 个 A 标签链接，然后在右边有两个标签，里面有一个图像。当我在任何项目上设置 align-self 时，它会上下移动，而不是像我预期的那样左右移动。请帮忙。

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;
    }

标签： reactjsflexboxstyled-components

解决方案

我不认为这可以用 align-self 来完成。放在margin-left: auto应该在右边的第一个元素上，或者margin-right: auto放在左边的最后一个元素上。或者，将左侧和右侧包裹在各自的弹性容器中，然后放在justify-content: space-between容纳左右弹性容器的弹性容器上。

推荐阅读