We use the CSS3 flex grid starting from a an easy structure to try a first variation for a first use
(Article 4 of the guide)
In this example we define 7 objects in a container. In this case we use the following properties:
- Flex container (flex)
- Center alignment inside the elements
- Percentage distribution
- Proportional height (1:1) to the width. We highlight the fact that the widest element that impose the longest high, the others adapt themselves to be high in the available space. We will solve this in t he next step.
At this point, as we promised, we will try to set the free elements to have their own height free from the available space. To do this we set the container to align the objects over the line and without extension. We relate this option to the proportion between width anfd height so the objects set themselves indipendently from the rest on two lines because the amount of the width is 200% so two lines!
At this point we set the environment less rigid and geometric and we start to think about a practical usage:
- we set a border radius for the objects.
- we expand the width of 10% and we set the margin at -5% so the objects won’t force to create a new line.
- we add a “on click” effect to set the object in front of the other objects.
- we make the objects swing a little bit… (css animation)
In this particular case we offert a method to show objects in a non conventional way, it could be use in a photogallery. The application of these rules is now in the art directors and developers hands.