CSS Flexbox

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Flexbox

CSS Flexbox is a powerful layout module that provides a more efficient way to lay out, align, and distribute items within a container. It is the most modern way to create layouts and position elements on a webpage.

Flexbox is a one-dimensional layout method for laying out items in rows or columns. It is a great tool to use for creating a responsive layout that can adjust to different devices and screen sizes. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.

Flexbox works by providing a flexible container that can adapt to the size of the content it contains. The container can be divided into two parts: the main axis and the cross axis. The main axis is the primary direction of the container, and the cross axis is the perpendicular direction.

The main axis is used to align items along the main axis, while the cross axis is used to align items along the cross axis. This allows for more flexibility when positioning elements on the page. The flex-direction property can be used to change the main and cross axes.

<div class="container">
   <div>item1</div>
   <div>item2</div>
   <div>item3</div>
   <div>item4</div>
</div>

.container {
   display: flex;
   flex-wrap: nowrap;
   background-color: green;
   flex-direction: row; 
}
  
.container div {
   background-color: yellow;
   width: 170px;
   margin: 30px;
   text-align: center;
   line-height: 50px;
   font-size: 18px;
}

The flex-direction property accepts 4 different values:

• row (default): same as text direction
• row-reverse: opposite to text direction
• column: same as row but top to bottom
• column-reverse: same as row-reverse top to bottom