CSS Flex: with all examples
source link: https://blog.knoldus.com/css-flex-with-all-examples/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS Flex: with all examples
Reading Time: 2 minutes
Confused with HTML elements positioning in CSS and by using other libraries or CSS snippets from stackoverflow? Don’t worry CSS flex is here. Flex means flexible box.
“The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container.”
So overall flex provides you the way to make your content flexible/responsive according to your view, you can position your elements upside down and anywhere on your page, whether it is the requirement to align your content in the center of the screen or anything else.
So flex has so many properties here we’ll talk about some major ones, with examples.
- Aligning the elements on the view
- Justifying your content on the view
- Wrapping the elements
- Flow of elements on row and column
Now we will look into the code for the 4th image example: In this, we are talking about flex-flow row & column properties, The flex-wrap property specifies whether the flex items should wrap or not if there is not enough room for them on one flex line.
The possible values are as follows:
nowrap – Default value. The flexible items will not wrap
wrap – The flexible items will wrap if necessary
wrap-reverse – The flexible items will wrap, if necessary, in reverse order
Code sample:
<!DOCTYPE html>
<html>
<head>
<title>FlexBox: Row and Column</title>
<style>
/*flex containers*/
.fx-flow-row {
display: flex;
flex-direction: row;
height:150px;
background-color:grey;
}
.fx-flow-row-reverse {
display: flex;
flex-direction: row-reverse;
height:150px;
background-color:grey;
}
.fx-flow-column {
display: flex;
flex-direction: column;
height:150px;
background-color:grey;
}
.fx-flow-column-reverse {
display: flex;
flex-direction: column-reverse;
height:150px;
background-color:grey;
}
.child{
width: 50px;
margin:10px;
background-color: orange;
}
</style>
</head>
<body>
<!–
row-reverse – If the writing-mode (direction) is left to right, the flex items will be laid out right to left
column – If the writing system is horizontal, the flex items will be laid out vertically
column-reverse – Same as column, but reversed
–>
<h4>Coming in a row</h4>
<div class="fx-flow-row">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
<h4>Coming in a row reverse</h4>
<div class="fx-flow-row-reverse">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
<h4>Coming in a coloumn</h4>
<div class="fx-flow-column">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
<h4>Coming in a column reverse</h4>
<div class="fx-flow-column-reverse">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
</body>
</html>
For all other examples and their sample code, check this repo. KFD
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK