1

Nao consigo colocar elas em row, apenas se eles estiverem width pra ficar todas do lado da outra.

  

 *{
box-sizing: border-box;
}
 
#countainerslider{
display: flex;
flex-flow: row wrap;
width: 100%;
height: 560px;
}
img{
width: 600px;
height: 200px;;
}
<body>
<div id='page'>
    <header>
    
        <div id="containerimgs">
            <div id="containerslider">
                <img class="imgnav" src="imgs/image3.jpg" alt="image-meat-tomates">
                <img class="imgnav" src="imgs/pepperonipizza.jpg" alt="pepperonipizza">
                <img class="imgnav" src="imgs/strawberry-chicken-salad-with-pecans.jpg"
                    alt="strawberry-chicken-salad-with-pecans">
                <img class="imgnav" src="imgs/burger.jpg" alt="burguer-bacon">
                <img class="imgnav" src="imgs/hotdogg.jpg" alt="hotdog">

            </div>
        </div>
    </header>
    <main>
        <section id="service">

        </section>
        <section id="food">

        </section>
    </main>
    <footer>
        <h3>Follow us :</h3>
        <i></i>
        <i></i>
    </footer>
</div>
</body>
inserir a descrição da imagem aqui

3 Respostas 3

2

Editei a resposta, simplificando o exemplo.

.row-nowrap {
flex-flow: row nowrap;
}

/* Flex Container */
.container {
margin: 0 auto;
display: flex;
border: 1px solid #ccc;
}
<section class="container row-nowrap">
<img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates">
<img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates"><img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates"><img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates"><img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates"><img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates"><img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates"><img class="imgnav" src="http://www.reasoft.com/tutorials/web/img/progress.jpg" alt="image-meat-tomates">
</section>

4
  • O que eu quero é que elas fiquem em apenas 1 row. todas, mesmo que saia da div. E elas funcionam desta forma se eu tirar esta declaraçao que disse, porém apenas se elas caberem dentro. como sao 5 imagens, nao fica em apenas 1 row. Tentei trocar position tambem 3/03/2019 às 22:59
  • Entendi, agora ficou mais claro, você quer algo dessa forma? codepen.io/gferreiraa/pen/gEMmPy 3/03/2019 às 23:18
  • Exato! Vou pegar como referencia. Muito Obrigado ! 3/03/2019 às 23:51
  • Consegui. Obrigado ! 3/03/2019 às 23:57
1

Se vc quer todas as imgs na mesma linha o pai tem que ser display:Flex e flex-wrap: nowrap. Essa propriedade não vai deixar a linha quebrar mesmo os filhos somando uma largura maior que a do pai

0

Coloque display:flex na div pai, no caso #containerimgs. Ficaria assim:

#containerimgs {
display:flex;
flex-direction: row;
}
3
  • Mas eu quero que fique em Row !! 3/03/2019 às 22:45
  • confundi no código. troca column por row no flex-direction
    – lvr7
    3/03/2019 às 22:46
  • Amigo já tentei kk 3/03/2019 às 22:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .