Responsive Divs cu flexbox

[giulian9]

Salutare, am tot incercat sa ma uit pe diverse exemple insa nu gasesc imi trebuie mie. In mod normal lucrez doar in back-end. Am de facut o pagina statica / responsiva .
Eu am incercat sa pun tot intr-un div ca mai apoi sa le separ cu alte div-uri ( la elemente ma refer) insa ultima parte nu ajunge jos, iar daca fortez cu margin-bottom / top arata mai rau.
Are cineva vreun exemplu cum s-ar putea face, am pus o poza ca sa exemplific.

julian777.lima-city.de/images/responsive.JPG

Ce cod html-css ai incercat?
Foloseste dimensiuni in procente (cu %) la proprietatile width si margin ale Div-urilor.
Poti incerca si cu flexbox:
marplo.net/css/css3-flexbox-container
marplo.net/css/css3-flexbox-item

Poti sa creezi still css diferit pentru dispozitive cu lungime mai mica de 640px, cu proprietatea @media screen.

De exemplu, in acelasi fisier css poti sa ai:

Cod: Selectaţi tot

/*stil css general */

@media screen and (max-width: 640px){
  /*stiluri css pt. fereastra cu lungime mai mica de 640 px. */
}

Iar in Head la pagina sa ai:

Cod: Selectaţi tot

<meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1' />

- HTML:

Cod: Selectaţi tot

<div class="box-wrapper">
  <div class="box">Box 1</div>
  <div class="box box-2">Box 2</div>
</div>
<div class="box-wrapper">
  <div class="box">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

- CSS:

Cod: Selectaţi tot

.box-wrapper {
			display: flex;
			flex-wrap: wrap;
			background:orange; /* sterge dupa */
			margin-bottom: 0.5rem;
			margin-left: 18.5vw;
			width: 62.1vw;
			}

		.box-wrapper .box {
				padding: 0.5rem;
				width:43vw;
				float:left;
						  }
		.box-wrapper .box2 {
				padding: 0.5rem;
				border: 1px solid;
				margin: 1.5em auto;
				width:15vw;
				float:left;
				background:green; /* sterge */
				
							}					
		.box-wrapper .box:first-child {
		flex-grow: 1;
			}
		.box-wrapper .box:last-child {
		
			}
		.img-custom { 
				width: 300px;
				float:left;
				padding-right:1rem;
				}

@media (max-width: 900px) {
	.box-wrapper{
		margin: 0;
		width:99vw;
				}
		.box-wrapper .box {
			flex-grow: 1;
			width: 98vw;
			}
  
  .box-wrapper .box-2,
  .box-wrapper .box-4 {
    position:relative;
    bottom: 0;
    left: 0px;
    right: 0px;
    width: 98vw;
  }
  .box-wrapper .box-2 {
    bottom: 36px;
  }

Doar ca atunci cand testez pentru mobil, imi raman fixate ...chiar daca dau scroll. iar daca folosesc position relative nu stau jos ...

Incearca urmatorul cod si modifica prin el dupa cum vrei sa rezulte.
L-am testat si se afiseaza ca in imaginea pe care ai pus-o la inceput.
Pentru alte modificari, vezi si tutorialele cu flexbox date in raspunsul anterior.

Cod: Selectaţi tot

<style>
.box-wrapper {
display: flex;
flex-wrap: wrap;
margin-bottom: 0.5rem;
margin-left: 9vw;
width: 62.1vw;
}

.box-wrapper .box{
margin:2px auto;
padding: 0.5rem;
}
.box-wrapper .box_grow {
background:orange;
flex-grow: 1;
width:43vw;
}
.box-2, .box-4 {
background:#beebbe;
width:16vw;
}

@media (max-width: 700px){

.box-wrapper{
margin:1px 0;
width:99vw;
}
.box-wrapper .box{
width:99%;
}
.box-wrapper .box-2, .box-wrapper .box-4{
order:1;
}

}
</style>

<div class="box-wrapper">
  <div class="box box_grow">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box_grow">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

- Demo:

Box 1

Box 2

Box 3

Box 4

Mutumesc Marplo. Codul postat de tine functioneaza perfect, insa probabil nu am stiut eu sa explic de vreau.
Postez si solutia gasita de mine, ideea este ca poate in viitor daca e nevoie sa mai pot adauga....sa nu ma incurc in css.
Cod HTML:

Cod: Selectaţi tot

<div class="container">
  <div class="box">
    BOX1: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto 
 <p>
   Box:3Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto 
  </div>
  <div class="box2">
    <div class="box2-r">
     BOX2: text text text text 
    </div>
    <div class="box2-r">
     BOX4: text text text text 
    </div>
  </div>
</div>

Cod CSS:

Cod: Selectaţi tot

.container {
  width:100%;
  clear:both;
}
.box { width:60%; 
       background:orange;
      float:left;
      }
.box2 {
      width:30%;
      float:left;
      background:grey;
      }
.box2-r { padding:15px;
          border:1px solid black;
         }
@media (max-width: 700px){
  .container { clear:none; }
  .box2 { margin:0; 
          width:100%; }
  .box { margin:0;
        width:100% ;}
}

Stima .