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>
Enter fullscreen mode Exit fullscreen mode
답글 남기기