Не могу установить три предмета в одном ряду

Question

У меня есть компонент реагирования с некоторым содержимым, которое будет показано три раза.

Я хочу, чтобы компоненты были в одной строке, в трех отдельных столбцах. Я много пробовал, но не смог этого сделать.

Это будет показано три раза:

 return (
            <div className={styles.grid}>
            <div className={styles.relatedNews}>
                <div className={styles.row}>
                    <div className={styles.imageContainer}>
                        <a href={this.props.url}><img src={this.props.image} /></a> 
                    </div>
                    <div className={styles.textContainer}>
                        <a href={this.props.url}>
                            <h2 className={styles.newsTitle} title={this.props.title}>{ Utilities.trimWord(this.props.title, 80, '...')}</h2>
                        </a>
                        <span className={styles.subHeadline}>{Utilities.trimWord(this.props.subheader, 50, '...')}
                        </span>
                        <div className={styles.info}>
                            <NewsInfo publishedDate={this.props.publishedDate} likes={this.props.likes} comments={this.props.comments} />
                        </div>
                        <div className={styles.row}>  
                            <NewsTags tags={this.props.tags} tagPageUrl={this.props.tagPageUrl} background={BackgroundType.Grey} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        );

Мой CSS:

.grid {
    // display: flex;
    // flex-wrap: wrap;
    // margin: auto auto auto;

    .relatedNews {
        float:left;

        // display: flex;        
        &:hover {
            .textContainer i.bookmark {
                display: block;
            }
        }

        .row {
            // display: flex;      
            // flex-direction: row;
            // align-items: center;
            display: block;
            width: 400px;

            .imageContainer {
                //position: relative;
                // flex: 0 0 215px;
                float:left;
                width: 115px;
                height: 130px;
                overflow: hidden;
                box-sizing: border-box;
                border: 1px solid #eaeaea;

               /*

                .video {
                    position: absolute;    
                    width: 100%;
                    height: 100%;
                    top: 0;
                    right: 0;
                    background-image: linear-gradient(41deg, rgba(0, 0, 0, 0) 77%, rgba(0,0,0,0.8) 110%);

                    i {
                        position: absolute;
                        width: 20px;
                        height: 21px;
                        top: 14px;
                        right: 13px;
                        color: #ffffff;
                        font-size: 20px;

                    }
                }

                */
            }
            .textContainer {
                //position: relative;
               // flex-grow: 1;
                padding-left: 27px;

                @media all and (max-width: 479px) {
                    padding-left: 0;
                }

                a {
                    text-decoration: none;
                }

                .newsTitle {
                    font-size: 17px;
                    color: #333;
                    //margin: 0 0 12px 0;
                    font-weight: normal;
                    //margin-right: 20px;
                    width: 190px;
                }

                .subHeadline {
                    font-size: 15px;
                    color: #858585;
                    margin-bottom: 17px;

                  //  display: inline-block;
                }

                .info {
                    font-size: 12px;
                    color: #c7c7cd;
                }

                .bookmark {
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: 18px;
                    padding: 3px;
                    display: none;
                    cursor: pointer;
                    z-index: 9999;
                }
            }                      
        }                

        @media all and (max-width: 479px) {
            display: block;
        }



        // .relatedarticles {
        //   width: 206px;
        //   height: 32px;
        //   font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
        //   font-size: 24px;
        //   font-weight: 300;
        //   font-style: normal;
        //   font-stretch: normal;
        //   line-height: normal;
        //   letter-spacing: normal;
        //   color: #424242;
        // }
    }
}

Не важно, что я пытаюсь, компоненты никогда не будут показаны в одной строке, а вместо этого в одном столбце.

Answer 1

Как работает свойство flex, оно применяет flex к прямому дочернему элементу и только к прямому дочернему элементу, а не к дочерним. Итак, из вашего примера выглядит так, как будто вы недостаточно углубились в отображение: flex; & flex-direction: row; свойства. Эти свойства должны быть в классе text-container и заставят <a />, <span />, <div className={styles.info}/> и <div className={styles.row} /> все сгибаться в направлении строки.

Когда вы применяете display: flex; и flex-direction: row к классу строк, единственное, что сгибает, это <div className={styles.imageContainer}> и <div className={styles.textContainer}>, все внутри textContainer все равно будет отображать блок и, следовательно, быть вертикальным, потому что свойство flex не не распространяется на детей детей.

Answer 2

Кажется, проблема в вашем html, поэтому он не переносится должным образом, потому что ниже есть только два столбца, то есть он не отображается в трех столбцах

                 <div className={styles.row}>
                  //This is 1st Column Start    
                    <div className={styles.imageContainer}>
                        <a href={this.props.url}><img src={this.props.image} /></a> 
                    </div>
                  //This is 1st Column END
                  //This is 2nd Column Start 
                    <div className={styles.textContainer}>
                        <a href={this.props.url}>
                            <h2 className={styles.newsTitle} title={this.props.title}>{ Utilities.trimWord(this.props.title, 80, '...')}</h2>
                        </a>
                        <span className={styles.subHeadline}>{Utilities.trimWord(this.props.subheader, 50, '...')}
                        </span>
                        <div className={styles.info}>
                            <NewsInfo publishedDate={this.props.publishedDate} likes={this.props.likes} comments={this.props.comments} />
                        </div>
                        <div className={styles.row}>  
                            <NewsTags tags={this.props.tags} tagPageUrl={this.props.tagPageUrl} background={BackgroundType.Grey} />
                        </div>
                    </div>
                  //This is 2nd Column end
                </div>

если вы хотите, чтобы отображались три столбца, используйте простой HTML и CSS Sinpet

.row{
    display: flex;
    flex-wrap: wrap;
    width:100%;
    margin: 0 auto;
}

.row > div{
   flex-basis: 33.33%;
   text-align: center;
   font-size: 24px;
}

<div class="row">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>