CSS Flex Responsive
Responsive flexbox means when a flex can perform a dynamic act of change of action like- change of screen size.
For example if you want to create two rows for small screen and one for big screen we can use the flex-direction property and set the degree for breakpoint, like from column to row in this case.
There can be made any kind of examples but we will see one worth looking -
Example -Creating a gallery
|
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<link rel="stylesheet" href="sample.css">
<div class="header">
<h1>Responsive Image Gallery</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row">
<div class="columns">
<img src="image1.jpg" style="width:100%">
<img src="image2.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
<img src="image3.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
</div>
<div class="columns">
<img src="image1.jpg" style="width:100%">
<img src="image2.png" style="width:100%">
<img src="image1.jpg" style="width:100%">
<img src="image2.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
<img src="image3.png" style="width:100%">
</div>
<div class="columns">
<img src="image1.jpg" style="width:100%">
<img src="image2.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
<img src="image3.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
</div>
<div class="columns">
<img src="image1.jpg" style="width:100%">
<img src="image2.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
<img src="image3.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
</div>
<div class="columns">
<img src="image1.jpg" style="width:100%">
<img src="image2.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
<img src="image3.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
</div>
<div class="columns">
<img src="image1.jpg" style="width:100%">
<img src="image2.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
<img src="image3.png" style="width:100%">
<img src="krishnaimage.jpg" style="width:100%">
<img src="image1.jpg" style="width:100%">
</div>
</div>
</body>
</html>
|
Output -
You can see the output after running the code.
