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 > Beginner for Beginner </ p > </ div ></ body > </ html > |
Output: