gracias por responder, con (align-items: center;) pierdo el efecto (width:100%;) quedando centrado con el ancho del contenido, efecto (margin:0 auto;) no deseado
am- AttributeModule, creo que viene siendo un derivado de data- , es una propuesta, aunque aun no he comprobado si la W3C lo permite como si fuese un data-
am-row y am-cel es la grilla
am-nav=row/column es para representar los enlaces en horizontal o vertical
supongo que en buenas practicas serian contenedores diferentes, estoy experimentando
me gustaría que el resultado fuese como table, pero mediante Flex:
Código HTML:
display:table-cell;
text-align:center;
vertical-align:middle;
He encontrado este ejemplo, usan align-self, pero usan tres niveles de etiquetas y yo lo estoy intentando con dos etiquetas, <nav> y <a>
Código HTML:
<div class= "flex-container stretch">
<div class= "flex-item"><p> 1</p></div>
<div class= "flex-item"><p> 2</p></div>
<div class= "flex-item"><p> 3</p></div>
<div class= "flex-item"><p> 4</p></div>
<div class= "flex-item"><p> 5</p></div>
<div class= "flex-item"><p> 6</p></div>
<div class= "flex-item"><p> 7</p></div>
</div>
<style>
.flex-container {
width : 250px;
height : 200px;
padding : 5px;
margin : 10px auto;
background-color : #124678;
display : -webkit-flex;
display : -ms-flexbox;
display : flex;
-webkit-flex-wrap : wrap;
-ms-flex-wrap : wrap;
flex-wrap : wrap;
}
.flex-item {
display : inherit;
width : 50px;
min-height : 50px;
background-color : #ccc;
margin : 5px;
}
.flex-item p {
width : 100%;
text-align : center;
align-self : center;
margin : 0;
}
.flex-container.stretch {
-webkit-align-content : stretch;
-ms-flex-line-pack : stretch;
align-content : stretch;
}
</style>