无法使用 flex-box 和 styled-components 水平排列项目列表答案

【问题标题】：Can't line up the item list horizontally using flex-box & styled-components无法使用 flex-box 和 styled-components 水平排列项目列表
【发布时间】：2021-08-16 12:09:09
【问题描述】：

我想在项目列表中排列项目。

这是项目列表块和 css

const ItemListBlock = styled.div`
    display: flex;
    width: 90%;
    flex-direction: row;
    margin-top: 3rem;
    flex-wrap: wrap;
`;


<ItemListBlock>
        <div>
            {items.map(item => (
                <Item className="item" item={item} key={item.id} />
            ))}
        </div>
</ItemListBlock>

这是项目块和css（有点缩写。）

const PostItemBlock = styled.div`
    display: flex;
    width: 352px;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 3rem;
    
    p {
        margin-top: 2rem;
    }
    h3 {
        width: 352px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
    }
    
    .subdesc {
        align-self: flex-end;
    }
`;


const Item = ({ item }) => {
    return (
        <ItemBlock>
            <h3>
               title.
            </h3>
            <p1 className="subdesc">subdesc.</p1>
        </ItemBlock>
    );
};

我想像这样显示项目列表：

但它实际上是这样显示的：

我写了 flex-direction:row。但它仍然垂直排列。如何水平排列项目？？

【问题讨论】：

标签： reactjs flexbox jsx styled-components

【解决方案1】：

PostItemBlock 应该是 inline 当前它是块：将其更改为 display: inline-flex

【讨论】：