I can’t leave the ROW imgs with flexbox

Asked

Viewed 28 times

1

I can’t put them in Row, only if they’re wide enough to be right next to each other. 

  

 *{
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

html css flexbox

3 answers

2


I edited the answer, simplifying the example.

.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>

  • What I want is for them to be in only 1 Row. all, even if I leave the div. And they work this way if I take this statement I said, but only if they fit in. as are 5 images, it is not only 1 Row. I tried to change position too

  • Got it, now it’s clearer, you want something like that? https://codepen.io/gferreiraa/pen/gEMmPy

  • Exactly! I’ll take it as a reference. Thank you very much !

  • I got it. Thank you !

1

If you want all imgs in the same line the father has to be display:Flex and flex-wrap: nowrap. This property will not let the line break even the children adding up a width larger than the father’s

0

Put display:flex on parent div, in case #containerimgs. Would look like this:

#containerimgs {
display:flex;
flex-direction: row;
}

  • But I want you to stay on Row !!

  • confused in code. exchange column for Row in flex-Direction

  • Friend already tried kk

Browser other questions tagged html css flexbox

You are not signed in. Login or sign up in order to post.