FLEX and GRID
What is FlexBox?
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.
Why FlexBox?
For a long time, the only reliable cross-browser-compatible tools available for creating CSS layouts were things like floats and positioning. The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:
- Vertically centering a block of content inside its parent.
- Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
- Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
Flexbox makes a lot of layout tasks much easier.
FlexBox Model Concepts:-
The ability to alter item width and height to best fit in its containers available free space.
Flex Properties:-
A flex container with three flex items:
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Parent Element(Container):
display: flex | inline-flex;
.flex-container {
display: flex;
}
flex-direction: row | column;
.flex-container {
display: flex;
flex-direction: column;
}
flex-wrap: wrap | nowrap | wrapreverse;
.flex-container {
display: flex;
flex-wrap: wrap;
}
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content: flex-start | flex-end | center | space-around | space-between;
.flex-container {
display: flex;
justify-content: center;
}
align-items: flex-start | flex-end | center;
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
align-content: flex-start |flex-end | center;
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Child Element(Items):
align-self: flex-start | flex-end | center;
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”align-self: center”>3</div>
<div>4</div>
</div>
Align the third flex item in the middle of the container.
flex-basis: <length>;
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-basis: 200px”>3</div>
<div>4</div>
</div>
Set the initial length of the third flex item to 200 pixels.
flex-grow: <number>;
<div class=”flex-container”>
<div style=”flex-grow: 1">1</div>
<div style=”flex-grow: 1">2</div>
<div style=”flex-grow: 8">3</div>
</div>
Make the third flex item grow eight times faster than the other flex items.
flex-shrink: <number>;
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-shrink: 0">3</div>
<div>4</div>
</div>
Do not let the third flex item shrink as much as the other flex items.
flex: <integer>;
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex: 0 0 200px”>3</div>
<div>4</div>
</div>
Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels.
order: <integer>;
<div class=”flex-container”>
<div style=”order: 3">1</div>
<div style=”order: 2">2</div>
<div style=”order: 4">3</div>
<div style=”order: 1">4</div>
</div>
The order property can change the order of the flex items.
What is Grid?
CSS Grid is an excellent tool for dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. For example, a grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
Grid Element:
A grid layout consists of a parent element, with one or more child elements.
<div class=”grid-container”>
<div class=”grid-item”>1</div>
<div class=”grid-item”>2</div>
<div class=”grid-item”>3</div>
<div class=”grid-item”>4</div>
<div class=”grid-item”>5</div>
<div class=”grid-item”>6</div>
</div>
Grid Properties:
Display Properties:
An HTML element becomes a grid container when its display property is set to grid or inline-grid.
Example:
.grid-container {
display: grid;
}
.grid-container {
display: inline-grid;
}
grid-template-columns
Make a grid with 4 columns:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
grid-template-rows
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
grid-template-areas
Let “myArea” span two columns in a five columns grid layout (period signs represent items with no name):
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: ‘myArea myArea . . .’;
}
grid-rows
Make “item1” start on row-line 1 and end on row-line 4:
.item1 {
grid-row: 1 / 4;
}
grid-columns
Make “item2” start on column 2 and span 3 columns:
.item2 {
grid-column: 2 / span 3;
}
References: