What is Flexbox?
- flex is used to make it easier to design the layout of the website.
- It is used to create a flexible structure without using float or positioning.
- flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
Properties for the Parent(flex container):
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
display:
- The flex container becomes flexible by setting the display property to flex
.container-flexbox {
display: flex;
}
flex-direction:
- The flex-direction property defines in which direction the container item should show (by default row)
.container-flexbox {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
- row (default): row value stacks the flex items horizontally (from left to right)
- row-reverse: row-reverse value stacks the flex items horizontally (but from right to left)
- column: same as row but top to bottom
- column-reverse: column-reverse value stacks the flex items vertically (but from bottom to top)
flex-wrap:
- The flex-wrap property specifies whether the flex items should be wrap or not.
.container-flexbox {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap (default): all flex items will be on one line
- wrap: flex items will wrap onto multiple lines, from top to bottom.
- wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
flex-flow property:
- flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties
.container-flexbox {
display: flex;
flex-flow: column wrap;
}
justify-content:
- The justify-content property is used to align the flex items.
.container-flexbox {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
- The flex-start value aligns the flex items at the beginning of the container (this is default).
- The flex-end value aligns the flex items at the end of the container.
- The space-around value displays the flex items with space before, between, and after the lines.
- The space-between value displays the flex items with space between the lines.
- The center value aligns the flex items at the center of the container
align-items:
- The align-items property is used to align the flex items.
.container-flexbox {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
}
- The center value aligns the flex items in the middle of the container
- The flex-start value aligns the flex items at the top of the container.
- The flex-end value aligns the flex items at the bottom of the container.
- The stretch value stretches the flex items to fill the container (this is default).
- The baseline value aligns the flex items such as their baselines aligns.
align-content:
- The align-content property is used to align the flex lines.
.container-flexbox {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
}
Properties for the Children(flex items)
- The direct child of a flex container automatically becomes flexible (flex) items.
- The flex item properties are:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order Property
- The order property specifies the order of the flex items.
- The order value must be a number, default value is 0
.item1 {
order: 3;
}
flex-grow Property
- The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items
- If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others
.item1 {
flex-grow: 4;
}
Negative numbers are invalid.
flex-shrink Property
- The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
.item4 {
flex-shrink: 0;
}
flex-basis Property
- The flex-basis property specifies the initial length of a flex item.
.item4 {
flex-basis: 200px;
}
flex Property
- This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, like flex: 5;, that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%;
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self Property
- The align-self property specifies the alignment for the selected item inside the flexible container
- The align-self property overrides the default alignment set by the container's align-items property.
example:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS Flexbox</h1>
<div class="parent-container-flexbox">
<div class="child-item">1</div>
<div class="child-item">2</div>
<div class="child-item" style="flex-grow: 3">3</div>
<div class=" child-item" style="order: 2">4</div>
</div>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
h1 {
text-shadow: 2px 2px 4px red;
margin-bottom: 30px;
text-align: center;
}
.container-flexbox {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
}
.parent-container-flexbox {
background-color: rgb(11, 118, 232);
display: flex;
/* flex-direction: column; */
/* flex-wrap: wrap; */
justify-content: center;
align-items: center;
}
.child-item {
color: white;
width: 40px;
height: 40px;
border: 2px solid black;
background-color: blueviolet;
margin: 5px;
padding: 15px;
/* flex-shrink: 4; */
flex-basis: 25%;
}
Do leave your comments