Brielle  Maggio

Brielle Maggio

1626706020

Easy CSS Flexbox Tutorial - Learn All Properties of Flexbox with Practical Examples

CSS Flexbox Tutorial For Beginners - Learn CSS Flexbox and CSS Flexbox Properties with Examples

In this video, we will be understanding how a CSS Flexbox grid works. This is an easy tutorial for beginners where we will cover a few theoretical basics and then move on to understanding Flexbox practically.

Find the CSS Flexbox code used in this video below:
https://liveweave.com/koTiGF

Play this CSS Flexbox game and increase your understanding even more:
https://flexboxfroggy.com/

Chapters:
00:00 Introduction
00:25 Introduction To CSS Flexbox
00:43 CSS Flexbox Structure
00:58 Flexbox Container
01:18 Flexbox Items
01:37 CSS Flexbox in Action
04:00 Understanding Flex-Direction property
05:47 Understanding Flex-Wrap property
07:52 Understanding Justify-Content property
10:13 Understanding Align-Items property
12:24 Understanding Align-Content property
14:30 Understanding Flex-Flow property
15:10 Understanding CSS Flexbox Order property
17:35 Understanding Flex-Grow property
18:54 Understanding Flex-Shrink property
20:00 Understanding Flex-Basis property
20:57 Understanding Align-Self property

#css #css flexbox

What is GEEK

Buddha Community

Easy CSS Flexbox Tutorial - Learn All Properties of Flexbox with Practical Examples

CSS FlexBox Cheat Sheets for Web Developers in 2021

It’s 2021! Let’s refresh Our CSS Flexbox  Memory. Here’s a Cheat Sheet of everything you can do with CSS flexbox to get started in 2021

#css3 #learn-flexbox-css #flexbox-tutorials #learn-css #web-development #learn-web-development #learning-css

Brielle  Maggio

Brielle Maggio

1626706020

Easy CSS Flexbox Tutorial - Learn All Properties of Flexbox with Practical Examples

CSS Flexbox Tutorial For Beginners - Learn CSS Flexbox and CSS Flexbox Properties with Examples

In this video, we will be understanding how a CSS Flexbox grid works. This is an easy tutorial for beginners where we will cover a few theoretical basics and then move on to understanding Flexbox practically.

Find the CSS Flexbox code used in this video below:
https://liveweave.com/koTiGF

Play this CSS Flexbox game and increase your understanding even more:
https://flexboxfroggy.com/

Chapters:
00:00 Introduction
00:25 Introduction To CSS Flexbox
00:43 CSS Flexbox Structure
00:58 Flexbox Container
01:18 Flexbox Items
01:37 CSS Flexbox in Action
04:00 Understanding Flex-Direction property
05:47 Understanding Flex-Wrap property
07:52 Understanding Justify-Content property
10:13 Understanding Align-Items property
12:24 Understanding Align-Content property
14:30 Understanding Flex-Flow property
15:10 Understanding CSS Flexbox Order property
17:35 Understanding Flex-Grow property
18:54 Understanding Flex-Shrink property
20:00 Understanding Flex-Basis property
20:57 Understanding Align-Self property

#css #css flexbox

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size. CSS is used to style HTML elements so that they look nice and decorated. CSS treats every element in the view of its box model. So every element has padding, margin, and border too.

You can learn more about CSS BOX Model here.

Box layout means to position a box on the page. So you may like to center an element horizontally or vertically or you may want to move the element to any other position on the page. Laying out your page is the most important task which determines the overall look of the page.

CSS has got many ways to align a box. You could choose floats, position property or you could try aligning it using margin and padding. But it’s not always so easy to align an element as you wish to. Developers have always been having difficulties to center an element horizontally or vertically. If you try using floats, you will see that it requires more work and gives you extra lines of code to position the element. So what’s the way out?

Here comes the modern CSS Flex Box technique. After using Flex Box for the first time you will forget the difficulties you have been facing with your layout. You will make your layout with fewer lines of code and very quickly.

Now after having Flex Box in your hand you don’t need to worry about every single element in your container. What you need is just add one or two lines of code and there you go.

What Are Some Of The Most Popular Uses Of Flex Box?

You can use Flex Box Almost anywhere on your website to align your content, but I found it more useful to apply it on certain parts of my page than others.

1: Navigation bar

The Navigation menu is mostly a horizontal or vertical bar on top or side of the page with links to other parts of the page. You can create a container for it and apply Flex Box to it so that you can move it’s items wherever it’s suitable for your page layout.

2: Footer

Footer of a website mostly includes contact details, logo, and some links to other parts of the site. You can align your footer content with the help of Flex Box too.

3: Horizontal Alignment

You can align your container’s elements on the horizontal line wherever you like and can add space in them.

4: Vertical Alignment

It often requires to position elements vertically, so there is a very easy way to achieve it with Flex Box. You just need to add one line and it’s already done.

4: Re-Ordering Elements

Flex Box has a function that allows you to rearrange the order of your elements in a container. You can change the order of any element you like.

#web-development #technology #css3 #flexbox #css #html-css #learning-css #learn-flexbox-css

Position Layout property in CSS

Hello, World! In this article, we will try to grasp the concepts of one of the trickiest and crucial topics in CSS.

Position layout property in CSS is solely used to place and position elements respectively in an HTML document. They assign respective positions to HTML elements so that the overall design of our page is maintained and managed well.

The widely used positions property in CSS are as follows:

1. Static position:

When an HTML element gets assigned with

staticposition, the various position properties likeleft,right,topandbottomdoesn’t work. Elements in an HTML document carry static position by default.

Let’s copy and paste the code below in an IDE to view what’s happening.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 200vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }

      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }

      #Div2 {
        position: static;
        left: 20px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

Upon adding position property

staticto the selector idDiv2, we saw that the position ofDiv2box didn’t change. Hence, we can conclude that elements with positionstaticdoesn’t get affected byleft, right,toporbottomproperties.

2. Relative position:

When an element gets assigned with position

relative, the position properties likeleft,right,top andbottomaffects the element’s position in the page relative to its normal position asstatic.

Let’s copy and paste the code below to

Div2selector to replace the previous position property.

#Div2 {
        position: relative;
        left: 20px;
        top: 50px;
      }

We can see that the

Div2box changed its position relative to its normal orstaticposition, i.e.20pxfrom theleftand50pxfrom thetop. Upon applyingrelativeposition property to an element, other contents in the same box won’t get affected and change positions

3. Fixed position:

This position property is used to freeze an element in a particular location of the page so that scrolling doesn’t affect the visibility or location of the element. When we apply

fixedvalue to a selector, it gets removed from the flow of the HTML document, i.e. the selector element gets uprooted from its actual position, becomes relative to the entire viewport, and doesn’t get scrolled.

Let’s copy and paste the code below to know the difference.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 400vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }
      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }
      #Div2 {
        position: fixed;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

After scrolling, we can see that the id

Div2gets fixed in the topmost corner of the document.

4. Absolute position:

Just like

fixedposition, theabsoluteposition property removes selectors from the flow. As the element gets removed from its normal position, the parent element doesn’t regard it as its child anymore. The element becomes relative to the document.

#css #css3 #css-position-property #tutorials #learning-css #html-css