Working with CSS property justify-content
Cascading Style sheet CSS, has come up with a key property of aligning and organising our contents in web development, and to make it easy. People with interest have developed a lot alternatives to learn CSS by developing an online Games to understand the context and how to use the properties and its values, but the key challenge here how can we transform these ideas and from Gaming into reality.
For this purpose, we will be transforming a CSS Game Flexbox Froggy into a real-life scenario, that is by aligning a Product list of items with their price and labels.
Products list of items, in real life market and shops are arranged on shelfs rack with clearly written label for identifications, therefore with the high rise in Digital transformation most of our Markets and shop are transforming to take their Business to online sales. with CSS we can create an easier way to arrange our Product on Shopping Shelfs rack in web page, by using the following properties that is; Justify-Content Property of CSS.
Justify Content Property aligns contents horizontally with respect to its values:
To use the CSS property, you need to index it as pointer of aligning and connecting it with other part of the codes, for this project we are connecting CSS with HTML using Visual studio as our integrated development environment.
I. Code to assign, initiate the use of CSS in your Program
II. HTML Codes for the Product design and its labels.
With the two codes above codes, CSS can justify the content developed by the markup language.
As indicated below.
III. flex-start - Align a content or product at left hand side of web page.
From this the class .ProductContainer was linked to the main HTML code using a dot operation(.) and display:flex; it is flexible container that keeps multiple items such as the justify-content, align-items and flex-direction. With it you will display your products both vertically and horizontally.
IV. flex-end -Align a content at the end righthand side of web page.
V. Center-Align or placed a content at center of a web page.
VI. space-between - Provides spaces between items equally
VII. space-around - provides space around items equally
These CSS property syntaxes are playing a key role in arranging contents and product within a web page.
All the five syntaxes have been tested and transformed into a real-life solution, by arranging Online sales products within the web page.
For the Model or real-life application wire frame, all the product list will be arranged according the CSS property.
For all the Justify Content values, below are the Models of arranging them and the real life work:
for the source code and word documentation click on the link below:
https://drive.google.com/drive/folders/10KK7sbqR-SCdQi5CUbnCzD-9tOSrkR4V?usp=share_link
Top comments (0)