The flex property in CSS is the shorthand for the flexible box layout model (flexbox). This model is designed to lay items in the container by distributing the space between them and aligning the items within the flexible container. It can enable the responsive design and simplify the creation of complex layouts.
Prerequisites
What is the Flex Property?
The flex property in CSS defines how the flex item grows or shrinks to fit the available space in the container. It can allow you to adjust the size of the items relative to each other, making it easier to create layouts that respond to the different screen sizes and orientations.
The flex property is shorthand for the following three sub-properties:
- flex-grow: It can specify how much the flex item should grow relative to the others.
- Flex shrink: It can specify how much the flex item should shrink relative to the other when there's not enough space.
- flex-basis: It can define the initial size of the flex item before any growing or shrinking occurs.
Flex Property
1. flex-grow
The flex-grow property can specify how much the flex item should grow relative to the other flex items inside the same container. If there is extra space in the container then the browser will distribute this space according to the flex-grow values.
- Default value: 0 ( the flex item will not grow).
- Possible Values: Any positive number.
The higher the value of the flex-grow, the more that particular item will grow compared to the others. If all the items have the flex-grow value of 1, they will grow at the same rate. If one item has the flex-grow value of 2 then it will grow twice as much as the others.
Syntax
.item1 {
flex-grow: 1; /* Will grow equally */
}
.item2 {
flex-grow: 2; /* Will grow twice as much as item1 */
}2. flex-shrink
The flex-shrink property can specify how much the flex item should shrink relative to the other items if the container is too small. In scenarios where the container size can be reduced, the browser will shrink the flex items according to the flex-shrink values.
- Default Value: 1 ( the flex item will shrink if necessary).
- Possible Values: Any positive number or 0.
If the item has a flex-shrink value of 0, it will not shrink when the container is too small, while items with a higher value will shrink more rapidly. Items with larger flex-shrink values will give up space more readily when space can be reduced.
Syntax
.item1 {
flex-shrink: 1; /* Will shrink equally */
}
.item2 {
flex-shrink: 2; /* Will shrink twice as much as item1 */
}3. flex-basis
The flex-basis property can define the initial size of the flex item before any space distribution happens. This property can act as the starting point for the item's size.
Default Value: auto ( the size of the item is based on its content or width/height if explicitly set).
Possible Values:
- The length value (example: 100px, 20%),
- auto ( the default)
- or 0 (the item will take up as little space as possible initially).
The flex-basis values set the preferred size for the flex item, which can serve as the base size. The browser will then determine how much extra space the item should take or give up depending on the container's size and the values of the flex-grow and flex-shrink.
Example
.item1 {
flex-basis: 100px;
/* Initial size of item1 will be 100px */
}
.item2 {
flex-basis: 200px;
/* Initial size of item2 will be 200px */
}
Example of Flexbox in Action
This example can demonstrate how the flex property affects the layout of the flex items in the flex container.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Property Example</title>
<style>
.container {
display: flex;
width: 100%;
height: 200px;
border: 2px solid black;
justify-content: space-between;
}
.item {
padding: 20px;
text-align: center;
background-color: lightblue;
border: 1px solid blue;
margin: 5px;
}
/* Each item uses different flex properties */
.item1 {
flex: 1 1 100px;
/* Grow and shrink equally with a base size of 100px */
}
.item2 {
flex: 2 1 200px;
/* Grow twice as much as item1 */
}
.item3 {
flex: 1 2 150px;
/* Shrink twice as much as the other items */
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
</body>
</html>
Output
Explanation
- Item 1 has the flex-grow of 1, it means that it will grow equally to the others. I have the flex-shrink of 1, so it will shrink equally with the other items. The base size is 100px.
- Item 2 has the flex-grow of 2, it means that it grow twice as much as item 1. Its base size is 200px.
- Item 3 has a flex shrink of 2, so it will shrink twice as much as the other items if the container becomes too small. The base size is 150px.
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read