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

Posted 2023-03-15

【中文标题】无法使用 flex-box 和 styled-components 水平排列项目列表

【英文标题】：Can't line up the item list horizontally using 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。但它仍然垂直排列。如何水平排列项目？？

【参考方案1】：

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