La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.
Prefijo para uso de FlexBox:
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
NOTA:
Para quien no sabe aun usar esta técnica se deberá colocar el prefijo anterior en el elemento padre de los elementos hijos donde queramos efectuar esta técnica, y lo siguiente en el mismo elemento padre ir colocando las propiedades de Caja Flexible, la magia de esta técnica es la propiedad justify-content lo cual hablaremos mas adelante.
Para poder entender un poco mas lo dicho anteriormente el #article-list vendría a ser el elemento padre de los article que seria los hijos y bajo el predijo se tendrían que usar las propiedades de FlexBox
PROPIEDADES
flex-direction: Establece la orientación de los elementos
row: Establece un eje horizontal.
row-reverse: Establece eje horizontal izquierdo.
colunm: Establece un eje vertical.
column-reverse: Establece eje vertical invertido.
flex-wrap: Posicionamiento evitando el desborde
nowrap: Establece items en una sola linea.
wrap: Establece items en modomultilinea
wrap-reverse: Establece modo multilinea inversa.
justifi-content: Alinear los items en el eje principal (Horizontal)
flex-start: Por defecto.
flex-end: Situa los elementos a la derecha.
center: Situa los elementos al centro del contenedor.
space-around: reparte los items horizontalmente respetando sus margenes.
space-between: Reparte los items horizontalmente sin respetar sus margenes
align-content: Alinear los items en el eje secundario (Vertical)
flex-start: Por defecto.
flex-end: Situa los elementos a la derecha.
center: Situa los elementos al centro del contenedor.
space-around: reparte los items horizontalmente respetando sus margenes.
space-between: Reparte los items horizontalmente sin respetar sus margenes
