CSS layouts and flexbox introduction simple tutorial

Introduction to Flexbox, What is Flexbox?

The basics of Flexbox, a powerful CSS layout tool used to create responsive and flexible layouts. how to use Flexbox properties to align, distribute, and order elements on a webpage.

• The Flexbox, Flexible Box Layout is a CSS layout model that allows you to arrange elements in rows or columns, distribute space, and align items. It simplifies creating flexible, responsive designs compared to using floats or manually setting margins.

CSS Flexbox, Flexible Box Layout

• To use flexbox, you need to set a container’s display property to flex, making the container a flex container, and its direct children become flex items.

Create a Flexbox Container

Basic Flexbox Terms, CSS Flexbox Components

• The Main Axis The primary axis along which the flex items are laid out can be horizontal or vertical and the Cross Axis The axis perpendicular to the main axis. A Flex Container and one or more Flex Items.

A CSS Flex Container with Three Flex Items

• The .container is set to display: flex, making it a flex container and each .item becomes a flex item, The flex: 1; property makes the items grow equally to fill the available space.

Flexbox Properties for Containers

1. The flex-direction specifies the direction of the flex items row or columns and values are row, column, row-reverse, column-reverse.
2. The justify-content aligns flex items along the main axis horizontally by default and values are flex-start, center, flex-end, space-between, space-around.
3. The align-items aligns flex items along the cross axis vertically and values are stretch, center, flex-start, flex-end.
4. The flex-wrap allows flex items to wrap onto multiple lines and values are nowrap is default, wrap, wrap-reverse.

Flex-direction Row

• The Flex-direction: row arranges the flex items horizontally. The Justify-content: space-between distributes space between the items, ensuring equal space between them and the Align-items: center aligns the items vertically in the middle of the container.

Flex-direction Column

CSS Flexbox Properties for Flex Items

1. The flex-grow controls how much the flex item grows relative to the others and values are any number the default is 0, meaning no growth.
2. The flex-shrink controls how much the flex item shrinks relative to the others and values are any number the default is 1, meaning items shrink as needed.
3. The flex-basis defines the default size of the flex item before any growing or shrinking. And Values Can be a length 100px or can be 100% percentage.
4. The order specifies the order of the flex items. Lower numbers appear first. And values are any number default is 0.

Flex-grow Items

• The flex-grow: 2 makes the item grow twice as fast as other items with flex-grow 1. flex-basis: 100px sets the initial size of the item to 100px before applying growth or shrink.

Responsive Design with Flexbox

• The flexbox simplifies building responsive layouts that adjust to different screen sizes. By using Flexbox and media queries, you can change the layout for smaller devices.

Making Layouts Responsive in different devices

• The flex-wrap: wrap allows the items to wrap onto the next line if there’s not enough space. The media query adjusts the layout on small screens in smartphones setting flex-basis: 100% to make each item take up the full width.

Building a Responsive Navigation Bar

Use flexbox to create a responsive navigation bar

1. To create a navigation bar with links for Home, About, and Contact. Use display: flex to align the links in a row. Add a media query to stack the links vertically on smaller screens.

Navigation bar layout with Media query to resize on multiple devices

Resizing Responsive Navbar