How to make container shrink-to-fit child elements as they wrap? Last Updated : 23 Jun, 2020 Improve Improve Like Article Like Save Share Report 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. 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: Like Article Suggest improvement Previous How to specify the type of files that server accepts in HTML5 ? Next Bulma | Dropdown Share your thoughts in the comments Add Your Comment Please Login to comment...