Learn How to Design a Simple Website Using Flexbox

0
32
Simple Website Using Flexbox

Flexbox is a CSS module that provides developers with a more efficient way to design the layout of a web page. It simplifies the process of laying out, aligning and distributing space among items in a container, even when their size is unknown and/or dynamic. The objective of using Flex is to give the container the ability to modify its items’ width/height in order to best fill the available space. Flex accommodates all types of screen sizes and all display devices. In this article, we will be discussing step by step coding on how to design a simple website using Flexbox.

Because of the freedom that Flexbox offers when it comes to designing a layout, a lot of developers are now turning to flexbox to help them build dynamic and responsive layouts.

Let’s take a look at how you can build and integrate a simple website using Flexbox from scratch.

Before we begin with a flexbox example, we will need to download a few things such as the editor. Please download the sublimetext editor from “https://www.sublimetext.com/download” and install it on your system.

1) Create Project

On your desktop, create a folder with a name “flexbox”. Also create an index.html file and a CSS folder inside the flexbox folder. Now, create style.css file in the CSS folder.

2) Create a Form

Add the following code to create a Form with 2 rows and 2 fields as shown below in the index.html file:

DevOps Engineering E-Degree

Now add this piece of code to the Style.css file:

After you add the code, Save and close. Once you run the code, you will see the form has been created. Take a look at the snapshot below:

Create a form

3) Parent Element

The width value for the input field is different. With flexbox, we don’t need to assign the width. Each label is wrapped in the container div. We are setting the display property to flex, this will help the flex container become flexible and to set all flexible item in the same length.

Please add the code to the style.css file and see the changes

changes in the form

4) Three column layout:

Lets create the class for a column layout which contain 3 divs for main-column, sidebar one, sidebar-two. Please add the following code to the index.html file.

In the CSS file, we have added the display: flex; for set three divs side by side and to make three equal width column we added flex: 1 for each column, similarly if you want twice width for the main column you can set flex: 2 for main column etc.

side bar 1

main column 2

If you want to apply order for div, then you will give sidebar-one for order 1 and the main-column for order 2 and sidebar-two is on order 3, then add order in CSS as shown below:

5) Margins:

Let’s add a new section for 3 features as shown below.

Add the following code to the respective files. Save and close.

Index.html file

Style.css file

You will see the 3 features are added with no margins, same height, and the same width. See the example below:

features with no margin

Add margins in between the columns by using the space-around value, this displays the flex items between, after, before the line. Add the CSS shown below

The Above CSS snippet creates margins in between the column as shown in the screenshot

CSS snipet

6) Responsive

To make your 3 feature box responsive,add the below code in the style.css file

7) Multiple rows of items

Now, let’s create multiple rows of the item in next section by using tyhe flex-wrap property which specifies if the flex items wrap or not. Please check the example below. It has 7 flex items to demonstrate the flex-wrap property. Add the code to the index.html file. Save and close.

Style.css file

CSS file

The code below is the complete code of index.html file and style.css file.

index.html file

Style.css file

Since responsive has become such as important factor in web design, it is important for developers to be able to develop this technology without having to go through a lot of hassle. With Flexbox, this task becomes easier.

In this article, we showed you exactly how you can use Flex box to create multiple boxes on a single page. Now, you can add content and other features easily on your website. You can easily flex their sizes to respond to available space. If you have any problems or questions regarding Flexbox, please feel free to drop us a message in the comments section below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here