Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
.flex-container {
display: flex;}
display: flex;}
The flex container properties are:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
The flex-direction Property
The flex-direction property defines in which direction the container wants to stack the flex items.
The justify-content Property
The justify-content property is used to align the flex items
The align-items Property
The align-items property is used to align the flex items vertically. height property is very important.
The justify-content property is used to align the flex items
.flex-container {
display: flex;
justify-content: center;}
display: flex;
justify-content: center;}
The align-items property is used to align the flex items vertically. height property is very important.
.flex-container {
display: flex;
height: 200px;
align-items: center;}
display: flex;
height: 200px;
align-items: center;}
The align-content Property
The align-content property is used to align the flex lines.
FlexBox Basic - Example
<!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">
<style>
#container{
display: flex;
/* flex-direction: column; */
flex-direction: row;
flex-wrap: wrap;
/* Short cut for flex-direction, flex-wrap */
/* flex-flow: row nowrap; */
}
.item{
background: #f4f4f4;
text-align: center;
padding : 1rem;
border: 1px solid #ccc;
flex: 1;
margin: 0.75rem;
}
.item:first-child{
/* flex: 3; */
flex: 1;
}
</style>
<title>Flex Basics</title>
</head>
<body>
<div id="container">
<div class="item"><h3>Item 1</h3></div>
<div class="item"><h3>Item 2</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
<div class="item"><h3>Item 3</h3></div>
</div>
</body>
</html>
FlexBox Align - Example
<!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">
<style>
#container{
background: #555;
display: flex;
flex-wrap: wrap;
/* Align Item Horizontal */
justify-content: space-evenly;
/* Align Item Vertical (must be 'height' property) */
height: 600px;
align-items: baseline;
/* Align item vertical where extra space */
align-content: space-between;
}
.item{
background: #f4f4f4;
border: 1px solid #ccc;
text-align: center;
padding: 1rem;
margin: 0.5rem;
/* Same thing " width = flex-basis " */
/* width: 300px; */
flex-basis: 300px;
}
.item-1{
order: 3;
}
.item-2{
/* Align single item vertical */
align-self: center;
order: 2;
}
.item-3{
order: 1;
}
</style>
<title>Document</title>
</head>
<body>
<div id="container">
<div class="item item-1"><h3>Item 1</h3></div>
<div class="item item-2"><h3>Item 2</h3></div>
<div class="item item-3"><h3>Item 3</h3></div>
</div>
</body>
</html>
No comments:
Post a Comment