Flex Boxes

Flex Boxes

·

5 min read

Flexbox is a CSS layout model that helps you create flexible and efficient layouts for your web pages. It's great for making responsive designs and managing how elements align and spread out within a container.

Flex Box added to a container class.

Flexbox Row


 display:flex;
 justify-content: flex-start; // main axis aligin left side
 justify-content: flex-end // main axis algin Right side
 align-items : flex-start ; // cross axis up side 
 align -items :flex-end; // cross axis down side 
 justify-content: center;
 align-items  center;

Flexbox columns

 display:flex;
 flex-direction:column; // columns side of the table
  justify-content: flex-start; // main axis aligin up side
 justify-content: flex-end // main axis algin down  side
 align-items : flex-start ; // cross axis left side 
 align -items :flex-end; // cross axis Right side

Space Between

  1. space-between is a value for the justify-content property in CSS Flexbox.

  2. It evenly distributes flex items along the main axis, with space between the items and at the start and end of the container.

  3. This creates equal space between adjacent items but no space at the container's edges.

.OuterBox {
  padding: 20px;
  min-height: 600px;
  background-color: red;
  display:flex;
 justify-content:space-between; 
  align-items:center; 
}
.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  border:2px solid white;

.container {
  display: flex;
  justify-content: flex-start;
}

Space around

  1. justify-content: space-around; distributes items evenly along the main axis, with equal space around them.

  2. This CSS property creates a layout where each item has an equal amount of space around it, including both the space between items and the space between the outer items and the container edges

  3. It's a convenient way to achieve balanced spacing between flex items in a flex container without specifying exact sizes or margins.

.OuterBox {
  min-height: 600px;
  background-color: red;
  display:flex;
 justify-content:space-around; 
  align-items:center; 
}
.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  border:2px solid white;
}
.container {
  display: flex;
  justify-content: flex-start;
}

Flex - Wrap

  • Flex wrap is a CSS property that determines whether flex items should wrap onto multiple lines if they exceed the container's width or height.

  • Setting flex-wrap: wrap; allows flex items to wrap onto the next line when necessary, maintaining the container's defined width or height.

  • Conversely, flex-wrap: nowrap; prevents wrapping, causing flex items to shrink or overflow if they can't fit within the container.


.OuterBox {
  min-height: 600px;
  background-color: red;
  display:flex;
  flex-wrap: wrap;
 justify-content:space-around; 
  align-items:center; 
}
.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  border:2px solid white;
}

.container {
  display: flex;
  justify-content: flex-start;
}
  • Flex box is used to create responsive layouts, for example, in E-commerce websites and OTT platform websites.

Align self and Justify self

  • The align-self property specifies the alignment in the block direction for the selected item inside a flexbox or grid container.

  • For pages in English, block direction is downward and inline direction is left to right.

  • Tip: To align a grid item in the inline direction instead of the block direction, use [justify-self](<https://www.w3schools.com/cssref/css_pr_justify-self.php>) or [justify-items](<https://www.w3schools.com/cssref/css_pr_justify-items.php>) properties.

  • Note: The align-self property overrides the grid or flexible container's [align-items](<https://www.w3schools.com/cssref/css3_pr_align-items.php>) property

.OuterBox {
  min-height: 600px;
  background-color: red;
  display:flex;
  flex-wrap: wrap;
 justify-content:space-around; 
  align-items:center; 
}
.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  border:2px solid white;
}

.box1{
  align-self: self-end;   // rows 
  justify-self:flex-start; // columns
}

.container {
  display: flex;
  justify-content: flex-start;
}

Flex Grow

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

Flex Grow

The flex-grow property is mainly used to increase the size of the image inside the box and adjust its dimensions.

Flex - Basis

The flex-basis the property specifies the initial length of a flexible item.

Flex Shrink

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

Box value doesn’t change using Shink

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex Box</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="OuterBox">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
    </div>
    <div class="container">
      <p class="para1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus,
        inventore? Quae debitis molestiae obcaecati facere nisi repellat,
        doloribus molestias magnam velit corrupti, mollitia numquam eligendi
        quia, adipisci nostrum cum odio.
      </p>
      <p class="para2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde
        perferendis sequi qui debitis distinctio voluptatum, velit est expedita
        maxime facilis beatae harum quasi itaque dolore quos rerum temporibus
        voluptates. Totam.
      </p>
      <p class="para3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, fugiat
        consequatur? Enim consectetur illum repellat sapiente ratione nihil? Sit
        nam earum quo voluptate repudiandae maxime perferendis magnam
        perspiciatis asperiores error?
      </p>
    </div>
  </body>
</html>
body {
  background-color: pink;
}

.OuterBox {
  min-height: 600px;
  background-color: red;
  display:flex;
  /* flex-wrap: wrap; */
 justify-content:space-around; 
  align-items:center; 
}
.box {
  width: 200px;
  height: 100px;
  background-color: blue;
  border:2px solid white;
}

.box1{
  align-self: self-start;   // rows
  /* justify-self:flex-start; // columns */
}

.box2{
  /* flex-grow:1;
  flex-basis:0; */
  flex-shrink:1;
}

.box3{
  flex-grow:1;
  /* flex-basis:200px; */
}
.box4{
  flex-grow:1;
  /* flex-basis:0; */
}

.container {
  display: flex;
  justify-content: flex-start;
}

p {
  padding: 20px;
}

.para1 {
  background-color: Red;
  /*  flex: 1;
     order:3; 
  */
}

.para2 {
  background-color: aquamarine;
  /* flex: 2; 
  oder:1;
  */
}

.para3 {
  background-color: purple;
  /* flex: 1;
    order:2;
  */
}

/* // em => reference parent 1 16px
// rem => reference root */

Did you find this article valuable?

Support Gokil P by becoming a sponsor. Any amount is appreciated!