Task 42 : CSS 3 Training for WordPress – Part 9 FlexBox – WP Spartans 300

by | Sep 2, 2021 | 0 comments

Task 42 : CSS 3 Training for WordPress – Part 9 FlexBox – WP Spartans 300

by | Sep 2, 2021 | CSS Tips and Tricks | 0 comments



CSS is Visual Representation of the web content. CSS3 training for WordPress is part of our Three Months Absolutely Free WordPress training (In Urdu/ Hindi) under WP Spartans Mission 300. This is Part 9 and Task 42.

In this Task 42 of CSS Training for WordPress, we tried to comprehend CSS Flexbox Model Layout. It was hard to cover all properties and corresponding values in just one tutorial, however, I believe the basic concepts will be covered easily.

First of all, we discussed what’s flexbox in CSS? Then we defined Flex Container in easy to understand way. We moved on towards Flex Items and talked about them in detail.

Then we used two online resources to better understand the use of flexbox properties. Reference URLs are as under:

1: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
2: https://www.w3schools.com/css/css3_flexbox.asp
3: You would love to check this out: https://codepen.io/enxaneta/full/adLPwv

Following terms were discussed in this tutorial regarding FlexBox.

Flex Direction (4 Values)
row, row reverse, column, column-reverse

Flex Wrap
flex-wrap: wrap;
or, flex-wrap: nowrap; or wrap-reverse

Flex Flow (shorthand for Flex Direction and Flex Wrap)

Justify Content accepts 6 values
justify-content: space-between;
flex-start
flex-end
center
space-between
space-around
space-evenly

Align Content Property accepts 6 values
align-content: center;
align-content: flex-start;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: stretch; Default Value

Align Items accepts 5 values
align-items: flex-start;
flex-start
flex-end
center
baseline
stretch (default)

align self works on flex items only
align-self: stretch; align-self: center; align-self: flex-end; align-self: flex-start;
We also explored Flex Items Properties i.e. Order, Grow, Shrink and Stretch etc.

#WPSpartans300 is a mission. WordPress Developers from all over the world have started taking interest in this initiative. Therefore, I’m putting all my energy to make this journey wonderful and full of success.

Link to Access Top WP Developers Mission 2019:
http://bit.ly/2Pgia38

Or, simply visit https://www.freelancepakistan.com and click on 300 Spartan Page.

Through this three months Free WordPress Training (Absolutely FREE), we will learn how to create responsive WordPress Themes and Plugins. We’ll be in a position to sell our assets via Themeforest (Envato) and other platforms. Get ready to conquer that front.

Let me tell you that without passion and commitment, you won’t be able to be a Rockstar WordPress Developer. It does take a lot of hard work ; however, the end result is awesome.

I will guide you step by step so that you could get results from your WordPress Training Mission. Get ready to excel as a professional developer. It’d be fun and exciting adventure.

300 Spartans will learn to unlock WP Codex. APIs will be the ultimate goal. From PSD to WordPress Conversion to WordPress Based Mobile Apps, Spartans will conquer their fears. 300 Lucky WordPress Developers will enjoy lucrative benefits of successful online projects.

My name is Farooq, and I’m a top rated Upwork Freelancer. I’m offering services to international clients as ‘WordPress and Graphic Design Pro’.

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Kelicor Logistics

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my...

Colin, Kelicor Logistics Solutions

Dieno Digital Marketing Services
5
2018-04-27T01:07:34+00:00

Colin, Kelicor Logistics Solutions

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my questions and was always prepared to go the extra mile, in order to ensure my website conveyed it's intended message,, And the cherry on top was it was most affordable. Would definitely recommend. Thanks Leland !

McNeney McNeney Spieker LLP

Dieno Digital has been providing our firm with what we like to call the Royal Package in customer service for...

M, McNeney McNeney Spieker LLP

Dieno Digital Marketing Services
5
2018-04-27T01:08:19+00:00

M, McNeney McNeney Spieker LLP

Dieno Digital has been providing our firm with what we like to call the Royal Package in customer service for over 3 years now. The knowledge and skills Leland brings to the table has increased our business and streamlined our social media platform. Our requests are always dealt with in a timely manner and we are always given options and alternatives to better reach potential new clients. We highly recommend Dieno Digital to increase your life social media presence.

Vancity Dietitians

Leland was speedy and efficient in working with our website. Leland knows how picky we can be and he handled...

Raman, Vancity Dietitians

Dieno Digital Marketing Services
5
2018-04-27T01:09:04+00:00

Raman, Vancity Dietitians

Leland was speedy and efficient in working with our website. Leland knows how picky we can be and he handled all change requests with patience! Furthermore, any time we had questions, there was no hesitation for Leland to reply with a thoughtful answer in a timely manner. Thanks for the great work!

Gloss Beauty Truck

Without the support and help of Leland my business would not be half of what it is. he puts the...

Tammie, Gloss Beauty Truck

Dieno Digital Marketing Services
5
2018-04-27T01:09:38+00:00

Tammie, Gloss Beauty Truck

Without the support and help of Leland my business would not be half of what it is. he puts the extra mile in to what he does to help make it easy from someone like myself who is incompetent with computers. I am so lucky to have him apart of my back end team. He's amazing at what he does .
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>