A Flexible Layout must have a parent element having display property set to flex. Direct child elements of the flexible container automatically become flexible items.
Approach:
-
The element below represents a flex container with four flex items.
<divid="container"><ul><li>icecream</li><li>sandwich</li><li>juice</li><li>coldrink</li></ul></div> -
Parent Element (Container)
The flex container becomes flexible by making the display property to flex:
.flex-container {display: flex;} -
The flex-wrap Property
The flex-wrap property states whether the flex items should wrap or not.
.flex-container {display: flex;flex-wrap: wrap;}It wraps value specifies that the flex items will wrap if necessary
-
Text Alignment
The text-align property sets the horizontal alignment of a text. A text can be left or right-aligned, centered, or justified.
h1{text-align:center;}h2{text-align:left;}h3{text-align:right;} -
CSS Setting height and width
The height & width properties are used to set the height & width of an element.
div {height:500px;width:50%;} -
CSS Padding
The CSS padding property is used to generate space around an element, inside borders.
div {padding-top:100px;padding-right:50px;padding-bottom:1000px;padding-left:100px;} -
CSS Margins
The CSS margin property is used to create space around elements, outside borders.
p {margin-top:100px;margin-bottom:100px;margin-right:150px;margin-left:80px;}
Example:
<!DOCTYPE html> <html>
<head>
<style>
ul { display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
border: 5px solid green;
} li { list-style-type: none;
border: 1px solid gray;
margin: 15px;
padding: 5px;
width: 200px;
text-align: center;
} </style>
<body>
<div id="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<p> Geeks for Geeks </p>
</div></body>
</html>
|
Output: