Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Flexbox CSS: Creating a Responsive Comment Section

In this tutorial, we will meet the method that allows us to create responsive comment sections for websites. And, in order to do so, we make use of Flexbox.

When surf the Web, especially certain social media websites and blogs, you might have often noticed that the comment section is pretty responsive and adaptable to a large extent. This has also been the trend for quite some time now, and is the ideal choice for most developers. Flexbox is what is making this largely possible and that too in a very simple manner.

So, what exactly is Flexbox?

Flexbox, which is the abbreviation of flexible boxes, is a new layout that has been added in CSS3. It allows for the easy creation of powerful layouts, which might have otherwise required plenty of hard work. Also, an added benefit is that almost all present day browsers are known to support Flexbox, therefore adding to compatibility and application. Overall, Flexbox makes a great deal of front-end work pretty simple to deal with.

Flexbox makes it possible for page elements, like comment sections, to behave predictably when the page needs to fit into varying display aspects, such as the screen size or devices. As of now, it has been replacing the former block model, which bears none of flexbox’s adaptable features.

When to use Flexbox?

Flexbox is primarily a very important development tool for certain features. You can use it for scaling, re-ordering and aligning elements, either horizontally or vertically, within a container. Other uses of Flexbox can be to change the direction of columns or rows.

Some Flexbox Concepts

Flex items and containers are the basically what make up Flexbox. The declaration of a flex container is done by the setting of the display property of a certain element to with flex (rendered to an entire block) or incline-flex (rendered inline). Inside the flex container, there can be one or more flex items. These items are positioned along a line called the flex line. There is only one flex line per container by default.

An example below demonstrates three flex items, positioned by default.

Listing 1: Three flex items

<!DOCTYPE html>
 <html>
 <head>
 <style> 
 .flex-container {
     display: -webkit-flex;
     display: flex;
     width: 450px;
     height: 300px;
     background-color: lightblue;
 }
 
 .flex-item {
     background-color: red;
     width: 110px;
     height: 110px;
     margin: 15px;
 }
 </style>
 </head>
 <body>
 
 <div class="flex-container">
   <div class="flex-item">Flex Item One</div>
   <div class="flex-item">Flex Item Two</div>
   <div class="flex-item">Flex Item Three</div> 
 </div>
 
 </body>
 </html> 

Direction of Flex

One can make use of the flex-direction property in order to specify the direction of flexible items inside a container. The default value of this property is always set to row (left to right and top to bottom).

Other values that one can implement are –

  • column – the flex items appear vertically if the writing system is horizontal.
  • column-reverse – This is same as that of a column, but appears reversed.
  • row-reverse – The items are laid in a right to left direction if the writing mode happens to be left to write.

Listing 2: Demonstration of column reverse

 .flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column-reverse;
     flex-direction: column-reverse;
     width: 450px;
     height: 300px;
     background-color: lightblue;
 }   
 

The property of justify-content

The use of justify-content is to align the items of the container horizontally, when they do not use all the available space on the main-axis.

There are several other values too, that can be set. These are given below.

  • flex-start – This is the default value where items are positioned at the start of the container.
  • flex-end – Just the opposite of the above, the items here are positioned at the end of the container.
  • center – The center of the container is where the items are positioned.
  • space-around – In this case, the items with space between, before and also after the lines.
  • space-between – The items are positioned with space available between the lines.

An example that demonstrates the space-around property has been provided below.

Listing 3: Demonstration of space-around

 .flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-justify-content: space-around;
     justify-content: space-around;
     width: 450px;
     height: 300px;
     background-color: lightblue;
 }
 

Property of align-items

The use of align-items is to vertically align a container’s items when they do not utilize all the available space on the cross-axis.

The other possible values that one can also make use of are –

  • stretch – Here, the items are stretched so that they fit the entire container. This is also the default value.
  • Flex-start – Using this positions all the items at the top of the container.
  • Flex-end – The items are positioned at the bottom of the container when you use this property.
  • Center – Taking a vertical aspect, the items are positioned at the center of the container.
  • Baseline – The baseline of the container is where the items are positioned.

An example provided below demonstrates the use of the flex-end value.

Listing 4: Demonstration of flex-end property

 .flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: flex-end;
     align-items: flex-end;
     width: 450px;
     height: 300px;
     background-color: lightblue;
 }

Property of flex-wrap

The property of flex-wrap state whether flex items should wrap or not, considering there isn’t much room on one flex line.

The other possible values that can be implemented are –

  • nowrap – This is the default set value where the flex items do not wrap.
  • wrap – Using this allows the flexible items to wrap as may be necessary.
  • wrap-reverse – This allows the items to wrap in reverse necessary, whenever wrapping is necessary.

Below are three types of demonstrations, which are basically the nowrap, wrap and reverse wrap properties.

Listing 5: The nowrap property

.flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-wrap: nowrap;
     flex-wrap: nowrap;
     width: 400px;
     height: 200px;
     background-color: lightblue;
 }

Listing 6: The wrap property

.flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     width: 400px;
     height: 200px;
     background-color: lightblue;
 }  

Listing 7: The reverse wrapping property

 .flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-wrap: wrap-reverse;
     flex-wrap: wrap-reverse;
     width: 400px;
     height: 200px;
     background-color: lightblue;
 }
 

Property of align-content

The property of align-content can be used to modify the instance of the flex-wrap property. It is also pretty similar to the align-items property, but applies to flex lines rather than flex items.

The possible values for align-content are –

  • stretch – The lines stretch in order to take up the remaining space. This is also the default value.
  • Flex-start – In this case, the lines are packed towards the beginning of the flex container.
  • Flex-end – The line here are packed towards the end of the flex container.
  • Center – Packs lines along the center of the flex container.
  • Space-between – Here, the lines are distributed along the flex container evenly.
  • Space-around – In this case too, the lines are evenly spread along the flex container, and also have half-sized spaces on either ends.

Listing 8: Demonstration of using center value

 .flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-align-content: center;
     align-content: center;
     width: 400px;
     height: 400px;
     background-color: lightblue;
 }
 

Properties of Flex Items

Now, we shall take a look at the flex item properties that are made available.

Ordering

The order property allows one to define the order of a certain item with respect to the rest of flexible items that are present in the same container.

Listing 9: Order property

.flex-item {
     background-color: lightblue;
     width: 150px;
     height: 150px;
     margin: 15px;
 }
 
 .first {
     -webkit-order: -1;
     order: 1;
 }  

Margins

The use of margin: auto absorbs the extra space. This can be useful in pushing the flex items into different positions.

The example below shows how margin: auto causes extra space to be absorbed to the right of the first element.

Listing 10: Margin

 .flex-item {
     background-color: lightblue;
     width: 80px;
     height: 80px;
     margin: 15px;
 }
 
 .flex-item:first-child {
     margin-right: auto;
 }

Flex

This property sets the length of the flex item, with respect to the rest of flex items inside the same container.

The example given below shows how the first and third flex item occupy one-fourth of the free space, while the second item takes up two-fourth of the free space.

Listing 11: flex property

.flex-item {
     background-color: lightblue;
     margin: 5px;
 }
 
 .item1 {
     -webkit-flex: 1;
     flex: 1;
 }
 
 .item2 {
     -webkit-flex: 2;
     flex: 2;
 }
 
 .item3 {
     -webkit-flex: 1;
     flex: 1;
 } 

Now that we have seen the various properties the Flexbox items and containers can possess, we go back to developing our responsive comment section.

Properties to be used

We shall make use of a few Flexbox properties to build a responsive comment section. These have been outlined.

display: flex – This allows us to activate the flex layout and further makes all elements within the category follow Flexbox’s rules.

order – This property helps us to position items as per the needs and design.

justify-content – The alignment of elements is carried out by this property.

flex-wrap – This particular feature is very useful and allows items to wrap when required. This is basically an adjustable feature.

Comment section layout

In our comment section, the layout shall be as defined.

  • A comment body, consisting of the name, display picture and time.
  • Two separate comment types. One shall be for the author and the other for user comments. Both of them shall have different colors.
  • The HTML markup for comments should be similar, so that it helps in easy generation of comments.
  • The whole section should be responsive in nature.

The HTML Code

This portion is rather simple and consists of a list of comments. There shall also be a form at the end that allows users to add comments.

Listing 12: HTML part

<ul class="commentsection">
       <li class="commnts usr_comments">
             <div class="inform">
             <a href="#">Nikki Tanaka</a>
       <span>10 hours ago</span>
       </div>
       <a class="avtar" href="#">
       <img src="images/avtarusr_one.jpg" width="40" alt="Profile Avatar" title="Nikki Tanaka" />
             </a>
       <p>Hello, How are you?</p>
       </li>
       <li class="commnts authr_comments">
       <div class="inform">
       <a href="#">Jack Tudor</a>
       <span>3 hours ago</span>
       </div>
       <a class="avtar" href="#">
       <img src="images/avtarauthr.jpg" width="30" alt="Profile Avtar" title="Mr Bool" />
             </a>
       <p>I am fine, how about you</p>
    </li>
        <li class="commnts usr_comments">
             <div class="inform">
             <a href="#">Nikki Tanaka</a>
       <span>2 hours ago</span>
       </div>
       <a class="avtar" href="#">
       <img src="images/avtarusr_one.jpg" width="40" alt="Profile Avatar" title="Nikki Tanaka" />           </a>
       <p>I am doing well</p>
       </li>
<!— To add comments in this section--><br />   <li class="writenew">
       <form action="#" method="post">
       <textarea placeholder="You can add your comment right here" name="comments"></textarea>
             <div>
       <img src="images/avtarusr_two.jpg" width="40" alt="Profile Joel Harris" title="Joel Harris" />
             <button type="submit">Submit</button>
       </div>
       </form>
    </li>
</ul> 

This part contains the same types of comments with the only difference being the class names. The colors shall be applied using CSS.

CSS Portion

Firstly, we make use of the display: flex property that applies Flexbox’s rules to the entire comment section.

.commnts{
  display: flex;
}
The next step reverses the container elements. The message comes first here, then the avatar and finally, the comment. The order property can be used to set this.
.commnts.authr_comments .inform{
  order: 3;
  } 
.commnts.authr_comments .avtar{
  order: 2;
  } 
.commnts.authr_commentsp{
  order: 1;
}

After this, the last task is to allow for readjustment of the comment section, especially when it is viewed on small or narrow screens. Using a media query, we expand the comments paragraph, such that it occupies the entire container width. With file-wrap, we also move the user information and the avatar to the next line.

Listing 13: CSS part for small screens

@media (max-width: 950px){
    /* Reversing the order of elements in the user comments part,
    such that the avatar and information appear right after the text. */
    .commnts.usr_comment .infom{
        order: 3;
    }
     .commnts.usr-comment .avtar{
        order: 2;
    }
     .commnts.usr-comment p{
        order: 1;
    }
    /* Making the paragraph in the comments occupy the whole width,
    Thus forcing avatar and user information to wrap to the next line*/
    .comment p{
        width: 100%;
    }
    /* Aligning towards the beginning of the container (i.e. to the left)
    For all elements that are inside the author comments. */
    .comment.author-comment{
        justify-content: flex-start;
    }
}

Following is the output of the responsive comment section

Figure 1: Output of the comment window

Conclusion

The tutorial demonstrated above provides a clear insight into what one needs to know about Flexbox and all the properties that can be implemented. Following this, we have also shown how one can very simply create a responsive comment section with the help of Flexbox.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login