Today session i learnt about how to use flex box ,flex items and their properities
Flex Box is a css tool mainly used to arranging inside the elements or items in a horizantal or vertical within the container
In the Flex Box the x axis or main axis is the primary direction and it is determined by the flex direction property
If the direction is row,the main axis is horizantal and the cross axis is vertical
Flex Items/ child properities
it is the child element of the flex container or flex box
order- Specifies the display order of the flex items inside the flex container
flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items
flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items
flex-basis - Specifies the initial length of a flex item
align-self - Specifies the alignment for the flex item inside the flex container
Parent Properities
display - Must be set to flex or inline-flex
flex-direction - Sets the display-direction of flex items
flex-wrap - Specifies whether the flex items should wrap or not
flex-flow - Shorthand property for flex-direction and flex-wrap
justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)
align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap
code area
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
border: 1px solid;
padding: 10px;
/* justify-content: center; */
/* height: 100vh; */
/* align-items: center; */
width: 20%;
/* flex-wrap: wrap; */
align-self: center;
}
.items{
border: 2px solid red;
padding: 10px;
/* height: 50%; */
}
#div1{
order: 2;
flex-grow: 1;
}
#div2{
order: 1;
flex-grow: 2;
}
#div3
{
flex-grow: 3;
order: 3;
}
</style>
</head>
<body>
<h1>Flex box</h1>
<div class="container">
<div id="div1">d1</div>
<div id="div2">d2</div>
<div id="div3">d3</div>
</div>
</body>
</html>
Top comments (2)
Solid day 1 notes, the order/flex-grow breakdown with your own code sample is a good way to actually learn it instead of just reading about it. One thing worth adding to your mental model early: flex-shrink defaults to 1, so items shrink by default even without you setting it, that trips people up more than flex-grow does since it's invisible until your container gets narrow. Keep posting these, writing it down while it's fresh is exactly how it sticks.
Nice