/* Display: It enables a flex container; inline or block */display: flex;/* Flex-direction: Determines the direction of the items. */flex-direction: row
/* Flex-wrap: Determines whether the flex items should wrap or not. */flex-wrap: wrap;/* Justify-content: This property is used to align the flex items. flex-wrap: nowrap; */justify-content: flex-start;/* Align-items: Determines the behavior for how flex items are laid out along the cross-axis on the current line. */align-items: flex-start;/* Align-content: specifies the distribution of space between and around content items along a flexbox's cross-axis */align-content: flex-start;/* Order: It is used to control the order in which flex items appear in the flex container. */order:1;/* Flex-grow: It allows representing the ability of a flex item to grow by your choice. */flex-grow:1;/* Flex-basis: This defines the default size of an element before the remaining space is distributed */flex-basis:50%;/* Flex-shrink: Defines the ability for a flex item to shrink. */flex-shrink:3;/* Align-self: Sets the alignment for individual items. */align-self: flex-start;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox Tutorial</title>
<style>.container{height:544px;width:100%;border:2px solid black;display: flex;/* Initialize the container as a flex box *//* Flex properties for a flex container *//* flex-direction: row; (Default value of flex-direction is row) *//* flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse; *//* flex-wrap: wrap; (Default value of flex-direction is no-wrap) *//* flex-wrap: wrap-reverse; *//* This is a shorthand for flex-direction: and flex-wrap: ;; *//* flex-flow: row-reverse wrap; *//* justify-content will justify the content in horizontal direction *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-evenly; *//* justify-content: space-around; *//* justify-content will justify the content in vertical direction *//* align-items: center; *//* align-items: flex-end; *//* align-items: flex-start; *//* align-items: stretch; */}.item{width:200px;height:200px;background-color:tomato;border:2px solid green;margin:10px;padding:3px;}#item-1{/* Flex properties for a flex item *//* Higher the order, later it shows up in the container *//* order: 2; *//* flex-grow: 2;
flex-shrink: 2; */}#item-2{/* flex-grow: 3;
flex-shrink: 3 ; */flex-basis:160px;/* when flex-direction is set to row flex-basis: will control width *//* when flex-direction is set to column flex-basis: will control height */}#item-3{/* flex: 2 2 230px; */align-self: flex-start;align-self: flex-end;align-self: center;}
</style>
</head>
<body>
<h1>This is Flexbox Tutorial</h1>
<div class="container">
<div class="item" id="item-1">First Box</div>
<div class="item" id="item-2">Second Box</div>
<div class="item" id="item-3">Third Box</div>
<!-- <div class="item" id="item-4">Fourth Box</div>
<div class="item" id="item-5">Fifth Box</div>
<div class="item" id="item-6">Sixth Box</div> -->
</div>
</body>
</html>
.flex-container{display: flex;background-color:DodgerBlue;}.flex-container> div{background-color:#f1f1f1;margin:10px;padding:20px;font-size:30px;}/* A Flexible Layout must have a parent element with the
display property set to flex. Direct child elements(s) of
the flexible container automatically becomes flexible items. */
/*This defines a flex container; inline or block depending on the
given value. It enables a flex context for all its direct children.*/.container{display: flex;/* or inline-flex */}/*Note that CSS columns have no effect on flex container*/
/* Display: It enables a flex container; inline or block */display: flex;/* Flex-direction: Determines the direction of the items. */flex-direction: row
/* Flex-wrap: Determines whether the flex items should wrap or not. */flex-wrap: wrap;/* Justify-content: This property is used to align the flex items. flex-wrap: nowrap; */justify-content: flex-start;/* Align-items: Determines the behavior for how flex items are laid out along the cross-axis on the current line. */align-items: flex-start;/* Align-content: specifies the distribution of space between and around content items along a flexbox's cross-axis */align-content: flex-start;/* Order: It is used to control the order in which flex items appear in the flex container. */order:1;/* Flex-grow: It allows representing the ability of a flex item to grow by your choice. */flex-grow:1;/* Flex-basis: This defines the default size of an element before the remaining space is distributed */flex-basis:50%;/* Flex-shrink: Defines the ability for a flex item to shrink. */flex-shrink:3;/* Align-self: Sets the alignment for individual items. */align-self: flex-start;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox Tutorial</title>
<style>.container{height:544px;width:100%;border:2px solid black;display: flex;/* Initialize the container as a flex box *//* Flex properties for a flex container *//* flex-direction: row; (Default value of flex-direction is row) *//* flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse; *//* flex-wrap: wrap; (Default value of flex-direction is no-wrap) *//* flex-wrap: wrap-reverse; *//* This is a shorthand for flex-direction: and flex-wrap: ;; *//* flex-flow: row-reverse wrap; *//* justify-content will justify the content in horizontal direction *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-evenly; *//* justify-content: space-around; *//* justify-content will justify the content in vertical direction *//* align-items: center; *//* align-items: flex-end; *//* align-items: flex-start; *//* align-items: stretch; */}.item{width:200px;height:200px;background-color:tomato;border:2px solid green;margin:10px;padding:3px;}#item-1{/* Flex properties for a flex item *//* Higher the order, later it shows up in the container *//* order: 2; *//* flex-grow: 2;
flex-shrink: 2; */}#item-2{/* flex-grow: 3;
flex-shrink: 3 ; */flex-basis:160px;/* when flex-direction is set to row flex-basis: will control width *//* when flex-direction is set to column flex-basis: will control height */}#item-3{/* flex: 2 2 230px; */align-self: flex-start;align-self: flex-end;align-self: center;}
</style>
</head>
<body>
<h1>This is Flexbox Tutorial</h1>
<div class="container">
<div class="item" id="item-1">First Box</div>
<div class="item" id="item-2">Second Box</div>
<div class="item" id="item-3">Third Box</div>
<!-- <div class="item" id="item-4">Fourth Box</div>
<div class="item" id="item-5">Fifth Box</div>
<div class="item" id="item-6">Sixth Box</div> -->
</div>
</body>
</html>
.flex-container{display: flex;background-color:DodgerBlue;}.flex-container> div{background-color:#f1f1f1;margin:10px;padding:20px;font-size:30px;}/* A Flexible Layout must have a parent element with the
display property set to flex. Direct child elements(s) of
the flexible container automatically becomes flexible items. */
/*This defines a flex container; inline or block depending on the
given value. It enables a flex context for all its direct children.*/.container{display: flex;/* or inline-flex */}/*Note that CSS columns have no effect on flex container*/