How To Make a Responsive Flexbox Website Layout

Hello viewer welcome to M-SoftTech Today I Will teach how to make a Responsive Flexbox Layout. As you know about flex. If “regular” layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”. flex provide some controls.

  • flex-start (default): items are packed toward the start of the flex-direction.
  • flex-end: items are packed toward the end of the flex-direction.
  • start: items are packed toward the start of the writing-mode direction.
  • end: items are packed toward the end of the writing-mode direction.
  • left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
  • right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.
  • center: items are centered along the line
  • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
  • space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
  • space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

HTML Source Code

<!DOCTYPE html>
	<title>CSS Flexible Box Layout</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">

<div class="wrap">
  <div class="container card">
    <div class="flex row structure">
      <div class="flex row structure-1">
        <div class="flex element a">
          <div class="content">
        <div class="flex element b">
          <div class="content">
        <div class="flex col structure-1-2-1">
          <div class="flex element c">
            <div class="content">
          <div class="flex element d">
            <div class="content">
        <div class="flex element e">
          <div class="content">
      <div class="flex row structure-2">
        <div class="flex element f">
          <div class="content">
        <div class="flex col structure-2-2">
          <div class="flex element g">
            <div class="content">
          <div class="flex element h">
            <div class="content">


CSS Source Code

@import '';
  background: #7dc9f1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 140px;
  margin:20px 0;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
  background: white;
  color: #424242;
  background-color: #1516160f;
  padding: 20px;
  font-family: "Montserrat";
  font-size: 40px;
@media (max-width: 375px){
    padding: 5px;
    font-size: 0;
    text-indent: -9999999em;
.element{padding: 10px;}
.flex{display: flex; box-sizing: border-box;}
.row{flex-flow: row wrap;}
.col{flex-flow: column wrap;}
.element{min-width: 100px;}
.content{flex: 1 100%;}
.structure{min-height: 480px;}
.structure-1{flex: 1 55.55555555556%;}
.a{flex: 1 40%;}
.b{flex: 1 60%;}
.structure-1-2-1{flex: 1 20%}
.c,.d{flex: 1 50%;}
.e{flex:1 80%;}
.structure-2{flex:1 44.4444444444444%;}
.f{flex: 1 50%;}
.structure-2-2{flex:1 50%;}
.g{flex: 1 75%;}
.h{flex:1 25%;}
@media(max-width: 768px){
    flex: 1 100%;
    min-height: 480px;

You May Also Like This

Create Custom Tooltip Using HTML CSS only

How to Make a Grid System Using HTML & CSS Only

Leave a Reply

Your email address will not be published. Required fields are marked *