Блог

я хочу применить свойство justify-content: center к компоненту Cards только тогда, когда внутри него находится только один компонент Card.

ниже приведен мой код,

 function Parent() {
    const order = //some array of objects
    return (
        <Cards>
            {orders.map((order, index) => {
                return (
                    <Card order={order} />
                );
            )}}
        </Cards>
    );
}


const Cards = styled.div`
    display: flex;
    flex-wrap: wrap;
    min-height: calc(${256 * 1.5});
    padding: 0 calc(50vw - 600px);
    @media screen and (max-width: 1320px) {
        width: 100vw;
        padding: 0 calc(50vw - 400px);
    }
`;

const Card = styled.div`
    max-width: 356px;
    height: 256px;
    width: calc(33.33% - 16px);
    @media screen and (max-width: 1320px) {
        width: calc(50% - 16px); 
    }
    margin: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
`;
  

Это отлично работает, когда у них много карточек. но когда есть только одна карта, карта не центрируется по div карт.

если я добавлю justify-content: center в div Cards, он будет работать нормально, когда есть только одна карта. но когда несколько карт говорят, что всего три карты, две карты поместятся в первом ряду, а третья карта будет в следующем ряду с ее положением, центрированным на карточках div.

итак, я попытался добавить:only-child селектор в div cards, и он по-прежнему ведет себя так же, с третьей картой, центрированной на div cards, где я ожидал, что она будет расположена прямо под первой картой в первом ряду.

то, что я пробовал, приведено ниже

 const Cards = styled.div`
    display: flex;
    flex-wrap: wrap;
    min-height: calc(${256 * 1.5});
    padding: 0 calc(50vw - 600px);
    @media screen and (max-width: 1320px) {
        width: 100vw;
        :only-child { //added this
            justify-content: center;
        }
        padding: 0 calc(50vw - 400px);
    }
`;

const Card = styled.div`
    max-width: 356px;
    height: 256px;
    width: calc(33.33% - 16px);
    @media screen and (max-width: 1320px) {
        width: calc(50% - 16px); 
    }
    margin: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
`;
  

ниже показано, как это выглядит в приведенном выше коде

 with three cards
[![enter image description here][1]][1]

with one card
  

хотите, чтобы это выглядело как показано ниже

 with 3 cards
  

с одной картой

может ли кто-нибудь помочь мне с этим. Спасибо.

Попробуйте этот способ

 function Parent() {
    const orders = [] //some array of objects
    return (
        <Cards itemsCount={orders.length}> // item count prop here
            {orders.map((order, index) => {
                return (
                    <Card order={order} />
                );
            )}}
        </Cards>
    );
}


const Cards = styled.div`
    justify-content: ${props => (props.itemsCount == 1 ? "centre" : "flex-start")};
    display: flex;
    flex-wrap: wrap;
    min-height: calc(${256 * 1.5});
    padding: 0 calc(50vw - 600px);
    @media screen and (max-width: 1320px) {
        width: 100vw;
        padding: 0 calc(50vw - 400px);
    }
`;
  

Хотя вы, вероятно, можете сделать что-то подобное с помощью чистого css, вам может быть проще немного помочь javascript. Я не уверен, какую библиотеку css-in-js вы используете, но обычно у них есть способ динамически создавать несколько стилей вместе. В качестве общего примера:

 function Parent() {
    const order = //some array of objects
    return (
        <Cards className={orders.length > 0 ? extraStyle : ''}>
            {orders.map((order, index) => {
                return (
                    <Card order={order} />
                );
            )}}
        </Cards>
    );
}