Course Content
Introduction
Introduction to CSS course
0/1
What is CSS and why is it important?
CSS Syntax
0/1
CSS Syntax
CSS Selectors
0/1
CSS Selectors
CSS Unit of Measurements
CSS units are used to specify measurements for various properties such as length, width, margin, padding, font size, and more.
0/1
Units of measurements
CSS Colors
CSS provides various ways to specify colors.
0/2
Colors in CSS
CSS Colors Tutorial (Tabular Form)
CSS Properties And Values
0/1
CSS Properties and Values Tutorial
CSS Background
0/1
CSS Background
CSS Box Model
0/1
CSS Box model
CSS Display
CSS display property is used to control how an element is displayed on the webpage.
0/3
CSS Display Tutorial (Tabular)
Display Flex Tutorial
Display Grid Tutorial
Display Flex
0/3
Display Flex
Flex tutorial with Images
Draft Lesson
Typography and Font Properties
0/1
Typography and Font Properties
Display Grid
0/5
CSS Grid Summary and Introduction
Grid properties
CSS Grid Image illustrations
The Grid Parent Level properties – Demo Screenshots
The Grid children/Items properties – Demo Screenshots
CSS Positioning
0/3
CSS Positioning
CSS Positioning Tutorial
CSS Float
CSS Display And Positioning
0/2
CSS Display
CSS Positioning
CSS Layout Techniques
0/3
CSS float and clear properties
CSS flexbox layout
CSS Grid Layout
Responsive Design with CSS Media Queries
0/1
Responsive Design with CSS Media Queries
Advanced CSS Topics
0/4
CSS Animation and Transitions
CSS transformations and 3D effects
CSS Filters and Blending Modes
CSS custom properties
CSS Frameworks and Libraries
0/4
Bootstrap framework
Foundation framework
Materialize CSS framework
Animate.css library
Preprocessors and Postprocessors
0/2
Sass and Less preprocessors
Autoprefixer and PostCSS postprocessors
CSS Best Practices and Optimization
0/4
Writing clean and efficient CSS
Semantic markup and accessibility
CSS validation and testing
CSS optimization techniques
Project Work
0/4
Building a responsive website using CSS
Implementing CSS animations and effects
Testing and debugging the website
Deploying the website to a live server
CSS
About Lesson

CSS Flexbox Tutorial

Flex Property Values Description Example Usage
display: flex; flex Sets the element as a flex container, enabling flex properties on its child elements. <div style="display: flex;">...
justify-content flex-start, flex-end, center, space-between, space-around Specifies how flex items are distributed along the main axis of the flex container.

  • flex-start: Items are aligned at the start of the container.
  • flex-end: Items are aligned at the end of the container.
  • center: Items are centered within the container.
  • space-between: Items are evenly distributed with space between them.
  • space-around: Items are evenly distributed with space around them.
 <div style="justify-content: flex-start;">...
align-items flex-start, flex-end, center, baseline, stretch Specifies how flex items are aligned along the cross axis of the flex container.

  • flex-start: Items are aligned at the start of the cross axis.
  • flex-end: Items are aligned at the end of the cross axis.
  • center: Items are centered along the cross axis.
  • baseline: Items are aligned based on their text baseline.
  • stretch: Items are stretched to fill the container along the cross axis.
 <div style="align-items: flex-start;">...
flex-direction row, row-reverse, column, column-reverse Specifies the direction of the main axis and cross axis within the flex container.

  • row: Items are laid out horizontally in the order they appear.
  • row-reverse: Items are laid out horizontally in reverse order.
  • column: Items are laid out vertically in the order they appear.
  • column-reverse: Items are laid out vertically in reverse order.
 <div style="flex-direction: row;">...
flex-wrap nowrap, wrap, wrap-reverse Specifies whether flex items should wrap or stay on a single line.

  • nowrap: Items are forced to stay on a single line.
  • wrap: Items wrap onto multiple lines if necessary.
  • wrap-reverse: Items wrap onto multiple lines in reverse order.
 <div style="flex-wrap: nowrap;">...
flex-grow number Specifies the ability for a flex item to grow if necessary within the flex container. <div style="flex-grow: 1;">...
flex-shrink number Specifies the ability for a flex item to shrink if necessary within the flex container. <div style="flex-shrink: 1;">...
flex-basis length, auto Specifies the initial size of a flex item before any remaining space is distributed.

  • length: Specifies a fixed length for the flex item.
  • auto: The default size of the flex item based on its content.
 <div style="flex-basis: 100px;">...
Previous
Next