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
space-between
is a value for thejustify-content
property in CSS Flexbox.It evenly distributes flex items along the main axis, with space between the items and at the start and end of the container.
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
justify-content: space-around;
distributes items evenly along the main axis, with equal space around them.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
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 */