Factory System Reports

Probleem

Design

We hebben al een mokup of wireframe gemaakt.

We beginnen met een div html element en classificeren het onder floor klasse. In de floor div maken we nog twee div's. Een div van de klasse control-panel en een div van de klasse showroom. Als het scherm breder is dan de hoogte tonen we het controlepaneel rechts de showroom te staan. Is het scherm smaller dan de hoogte komt het controlepaneel er boven te staan.

We meken van de floor div een flexbox container:

.floor {
   height: 100%;
   width: 100%;
   background-color: white;
   display: flex;
}

Dat alleen plaatst de showroom naast het controlepaneel.

De waarde flex verandert onze floor divisie in een flex-container. Alhoewel het display attribuut nu een andere waarde heeft blijft de floor divisie een blok element. De divisie blijft alle beschikbare ruimte binnen haar eigen bovenliggend element vullen.

See the Pen Tower Pattern Index Tiles Tile Makeup by Jef Inghelbrecht (@jef) on CodePen.

Oplossing