Me tiene locoo…….
trato que en diferentes container con sus item meter hojas html ya creadas.
Este código en este item3 dentro de .flex-container1 tal cual el enlace de hoja html sale otra hoja html y se deconfigura los enlaces del container2¿??
<ul class="flex-container1">
<li class="item" ID="item3"><img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>
.flex-container1{
width:100%; /* width:90%; */
max-width:auto; /* max-width:960px; */
list-style-type:none;
margin:0px auto; /* margin:20px auto; */
padding:0;
background-color:midnightblue; /* background-color:midnightblue; */
/*Flexbox setup*/
display:flex;
flex-flow:row wrap;
justify-content:flex-start;;/*poner los cuadros a la izquierda del padre justify-content: flex-start; centrado center;*/
align-items:center; /*este codigo y el de abajo es para meter varios textos en el cuadro con <br> */
align-content:stretch; /*este codigo y el de arriba es para meter varios textos en el cuadro con <br> */
}
.item{
height:160px; /* altura cuadro height:200px; */
width:290px; /*ancho width:200px; */
line-height:40px; /*distancia en alto del contenido del cuadro*/
font-size:13px; /*tamaño del contenido del cuadro*/
background-color:steelblue; /*color fondo cuadro background-color:steelblue*/
color:#fff; /*color:#fff; contenido del cuadro*/
text-align:left; /*ajustar a derecha izquierda o centro el contenido del cuadro*/
margin:5px 2px; /*25px distancia del ultimo item del cuadro de arriba 2px distancia de cuadros de al lado*/
}
En esta otra configuracion si consigo lo que quiero,pero cuando lo coloco en el container1 no me va sale otra hoja html que ya esta en container 2 con otro v-item4 :
<ul class="flex-container2">
<li class="v-item" ID="item5"><img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>
.flex-container2{
width:100%; /* width:90%; */
max-width:auto; /* max-width:960px; */
list-style-type:none;
margin:0px auto; /* margin:20px auto; */
padding:0;
background-color:midnightblue; /* background-color:midnightblue; */
/*Flexbox setup*/
display:flex;
flex-flow:row wrap;
justify-content:center;/*poner los cuadros a la izquierda del padre justify-content: flex-start;*/
}
.v-item{
height:260px; /* height:200px; */
width:380px; /* width:200px; */
line-height:200px; /*distancia en alto del contenido del cuadro*/
font-size:20px;
background-color:steelblue;/*color fondo cuadro background-color:steelblue*/
color:#fff; /*color:#fff; contenido del cuadro*/
text-align:center;/*ajustar a derecha izquierda o centro el contenido del cuadro*/
margin:5px 2px; /*25px distancia del ultimo item del cuadro de arriba 2px distancia de cuadros de al lado*/
}
.flex-container3{
width:100%; /* width:90%; */
max-width:auto; /* max-width:960px; */
list-style-type:none;
margin:0px auto; /* margin:20px auto; */
padding:0;
background-color:midnightblue; /* background-color:midnightblue; */
/*Flexbox setup*/
display:flex;
flex-flow:row wrap;
justify-content:center;/*poner los cuadros a la izquierda del padre justify-content: flex-start;*/
}
Bueno y aprovecho de paso como puedo cambiar individualmente los tamaños de los cuadros de los container ¿?????
Salud2.