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

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. This article explains all the fundamentals.

<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