Introduction to CSS-flexbox

Introduction to CSS Flexbox

Flexbox, formally known as the Flexible Box Layout Module, is a powerful tool in CSS that gives you ultimate control over arranging elements on your web page.

Why Use Flexbox?

Effortless Responsiveness: Flex items magically adjust size and position based on available space, ensuring your website looks amazing on any screen, from desktops to mobiles. No more pixel-perfect adjustments or layout woes!
Intuitive Alignment: Control how elements align within the container, be it horizontally, vertically, or centered, with simple properties like `justify-content` and `align-items`.
Distribution Magic: Flexbox makes distributing space between elements a breeze, whether you want them evenly spaced, skewed towards the beginning or end, or anything in between.
Easy Ordering: Change the order of elements on the fly without affecting their layout, using the `order` property.

Key Concepts in Flexbox

Flex container: The parent element with `display: flex`.
Flex items: The child elements within the container.
Main axis: The direction in which flex items are laid out (row or column).
Cross axis: The perpendicular direction to the main axis.

Flexbox Properties is shown in the table below

Property	Description	Default Value
display	Sets the display type to flexbox	inline
flex-direction	Defines the main axis direction (row, column, row-reverse, column-reverse)	row
flex-wrap	Determines whether items wrap onto multiple lines (nowrap, wrap, wrap-reverse)	nowrap
justify-content	Controls horizontal alignment of items (flex-start, flex-end, center, space-between, space-around)	flex-start
align-items	Controls vertical alignment of items (flex-start, flex-end, center, stretch)	flex-start
align-self	Overrides align-items for individual items (auto, flex-start, flex-end, center, stretch)	auto
flex-grow	Sets the flex grow factor for items (number, fraction)	0
flex-shrink	Sets the flex shrink factor for items (number, fraction)	1
flex-basis	Sets the initial size of the flex item (auto, content, length, percentage)	auto
order	Controls the order of items (integer)	0

HTML Code for a Webpage using CSS Flexbox

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Exercise using Flex</title>
      <link rel="stylesheet" href="test.css">
    </head>
    <body>
      <div class="header">
        <div class="logo">
          <img src="images/logo.JPG" alt="logo">
        </div>
        <div class="welcome">Welcome to CodeSpindle</div>
        <div class="menu">
          <ul>
            <li>About</li>
            <li>Login</li>
            <li>Register</li>
          </ul>
        </div>
      </div>
      <div class="mainbody">
        <div class="message">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ad saepe est impedit minima possimus, obcaecati dolorem, modi perferendis voluptate, beatae exercitationem temporibus iusto sequi. Cum sed excepturi nobis accusamus.
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit magnam quam maiores nihil adipisci ipsum repellendus sapiente tenetur? Tenetur aperiam nostrum sint delectus nam ea dolore fugiat accusantium ipsam explicabo!</p>
          <img src="images/chart.jpeg" alt="chart" id="chartimage">
        </div>
        <div class="welcomeimage">
          <img src="images/mainimage.jpg" alt="students" id="welcomeimg">
        </div>
        <div class="sidebanner">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem accusamus ipsa sed ea voluptate cupiditate incidunt commodi facilis, veniam iusto vel provident nisi modi voluptatibus qui enim nesciunt quam nam?
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, adipisci? Dolorum doloremque quo maiores quos deserunt, praesentium id quasi, saepe assumenda, neque dicta fugit illum! Perferendis quis aperiam atque ad.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam facilis cumque esse libero tempora, eius possimus nulla quaerat totam deserunt fugiat repellat itaque non quasi ad eveniet impedit voluptatibus odio.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo a aperiam</p>
        </div>
      </div>
      <pre> </pre>
      <h2>Check out Our Courses</h2>
      <hr style="height: 10px; background-color: dimgray;">
      <div class="coursecards">
        <div class="course1">
          <img src="images/cybersecurity.jpeg" alt="courseimage" class="courseimage">
        <div class="coursetitle">Cybersecurity Course <br> Be an Hacker!!!!</div>
        </div>
        <div class="course2">
          <img src="images/java.png" alt="courseimage" class="courseimage">
          <div class="coursetitle">Java Course <br> Be the Programmer!!!!</div>
        </div>
        <div class="course3">
          <img src="images/dbms.png" alt="courseimage" class="courseimage">
        <div class="coursetitle">Database Course <br> Be the DBA!!!!</div>
        </div>
        <div class="course4">
          <img src="images/Javascript.png" alt="courseimage" class="courseimage">
          <div class="coursetitle">Javascript Course <br> Be the Learner!!!!</div>
        </div>
      <!--   <div class="course5">MongoDB Course</div>
        <div class="course6">Oracle Course</div> -->
    
      </div>
      <div class="contact">
        <div class="address">
          <u>Contact US</u> <br>
          <br>
    
          Codespindle Office <br>
          Vellore <br>
          Tamilnadu <br>
          India <br>
        </div>
          <div class="vitimage">
            <img src="images/vit.JPG" alt="vitimage" id="vitimage">
          </div>
      </div>
      <div class="footer">
         <div class="copyright"></div>
      </div>
    </body>
    </html>

CSS Code


.header
{
    display: flex;
    width: 100%;
    height: 100px;
    flex-direction: row;
    justify-content: space-around;
    background-color: white;
    box-shadow:  5px 5px 30px black;

}

.logo
{
    
    width: 30%;
    
}

img
{
    width: 60%;
    height: 60%;
    padding-top: 20px;
}
.welcome
{
  
    width: 40%;
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.5rem;
    min-width: 300px;
    color:dimgray;
    text-decoration: underline;
}

#chartimage
{
    width: 100%;
    height: 30%;
    padding-top: 0px;
}

.menu
{
  
    width: 30%;
    font-family:'Times New Roman', Times, serif;
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 20px;
    text-decoration: underline;
}

.menu ul li
{
    list-style-type: none;
    float: left;
    padding: 10px;
    text-align: center;
   
}

.menu ul li:hover
{
    background-color:lightcyan;
}

.mainbody
{
    display: flex;
    justify-content: space-evenly;
    height: 400px;
    align-items: flex-start;
}

.message
{
    width: 20%;
    height: 95%;
    box-shadow:  5px 5px 10px darkgray;
    margin-top: 20px;
    padding-top: 20px;
    text-align: justify;
    padding: 10px;
}

.welcomeimage
{
    width: 45%;
    height: 100%;
    box-shadow:  5px 5px 10px darkgray;
}

#welcomeimg
{
    width: 100%;
    height: 100%;
}

.sidebanner
{
    width: 30%;
    background-color:dimgray;
    margin-top: 20px;
    height: 93%;
    box-shadow:  5px 5px 10px darkgray;
    color: white;
    font-weight: bold;
    padding: 10px;
    text-align: justify;
    padding-top: 20px;

}

.coursecards
{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: aliceblue;
    height: 400px;
    
}

.course1
{
    height: 100%;
    width: 300px;
    border: 2px solid black;
    background-color: beige;
}

.course2
{
    height: 100%;
    width: 300px;
    border: 2px solid black;
    background-color: beige;
}

.course3
{
    height: 100%;
    width: 300px;
    border: 2px solid black;
}

.course4
{
    height: 100%;
    width: 300px;
    border: 2px solid black;
}
.course5
{
    height: 100%;
    width: 300px;
    border: 2px solid black;
}
.course6
{
    height: 100%;
    width: 300px;
    border: 2px solid black;
}

.courseimage
{
    width: 30%;
    height: 90%;
    margin-top: 0;
}

.courseimage
{
    width: 100%;
    height: 80%;
    padding-top: 0px;
    border-bottom: 10px solid black;
}

.coursetitle
{
    font-weight: bold;
    text-align: center;
    font-size: larger;
}

.contact
{
    background-color:dimgray;
    display: flex;
    justify-content: space-evenly;
    height: 350px;
    margin-top: 20px;

}

.address
{
    width: 20%;
    font-size: x-large;
    margin: 100px;
    font-weight: bold;
    color: white;
}

.vitimage
{
    width: 80%;
}
#vitimage
{
    width: 100%;
    height: 100%;
    padding: 0px;
}

Output