Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
CSS Flexbox Quick introduction to using FlexBox CSS style
Rating: 4.2 out of 5(95 ratings)
7,474 students

CSS Flexbox Quick introduction to using FlexBox CSS style

Explore how you can use Flexbox to layout page elements
Created byLaurence Svekis
Last updated 11/2024
English
English [Auto],

What you'll learn

  • How to use CSS Flexbox

Explore related topics

Course content

2 sections • 18 lectures • 48m total length

  • Flexbox Introduction1:42

    Learn to use flex blocks to control layout with a flex container and items, enabling responsive design, navigation bars, grid layouts, wrapping images, and aligning content using included source code.

  • WebDevloper Setup Resources4:55

    Set up the brackets editor, create index.html and style.css, link the stylesheet, and build a flex blocks layout with a container and flex items, applying border-box sizing for layout.

  • Source Code Setup0:07
  • Flexbox Display first flex items.26:31

    Learn to set up a flex container, style its divs, and apply flex direction, wrap, and reverse options to control item order and wrapping on the main and cross axes.

  • Source Code Setup0:09
  • Sizing with Flexbox.9:55

    Learn how to size flex items within a flex container using the flex shorthand, grow, shrink, and basis, and how wrapping and auto sizing affect layout.

  • Source Code0:07
  • Flex Sizing exercise4:11

    Build a three-by-three flexbox grid by applying grow, width, and wrap to create a responsive layout, then craft vertical bar charts with flexible heights and colors.

  • Source Code0:09
  • Content Align Flexbox3:25

    Use align-self in flexbox to adjust the alignment of a single flex item, choosing from auto, baseline, center, flex, and flex-start, and use order to move items toward the end.

  • Source Code0:10
  • Flexbox Justify Content3:06

    Explore how to justify content in a flex container using the justify-content property, including center, start, end, space around, and space between, with flex items and visual examples.

  • Source Code0:07
  • Flexbox Align Items5:48

    Learn to use flexbox to align and justify content for a row of images, control wrapping, and adjust alignment along main and cross axes using justify-content, align-items, and flex-direction.

  • Source Code0:07
  • Final Exercise7:12

    Update a web page navigation by building two flex containers for the logo and the menu, then apply flex properties, justify content, and responsive spacing to menu items.

  • Source Code and Resources0:29

Requirements

  • HTML and some programming experience
  • CSS Fundamentals

Description

Explore more about using Flexbox with examples and sample code to get you coding.

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces

Please note that the scope of this course using CSS Flexbox.  If you are looking for a more detailed CSS course this course is not for you.  Simple course with limited scope designed to be topic specific.

Taught by an instructor with over 20 years of Web Development experience.

If you've been looking to get started with CSS Flexbox -  THIS COURSE IS FOR YOU!!!!

Nothing to lose - Fast friendly support is always available to help if you need it.

Please note that the SCOPE OF THIS COURSE IS Creating and using CSS flexbox and will not cover complex commands and everything about CSS, HOW TO GET STARTED COURSE - if you are looking at more detailed node or JavaScript content this is not for you.

Who this course is for:

  • Web developers
  • Web designers
  • Anyone who is building a website
  • Webmasters and web coders creating web content

Report abuse