How to make container shrink-to-fit child elements as they wrap?
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.
< div id = "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.
h 1 {
text-align : center ;
}
h 2 {
text-align : left ;
}
h 3 {
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:
Last Updated :
23 Jun, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...