CSS3 Flexbox: Flex-Wrap: Nowrap

The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. The default value is nowrap, where the flex items will not wrap at all. The following example shows the result of using the nowrap value:

HTML file: Displayed by browser:
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
<body>
<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
<p>The flex-items resized smaller than specified. If you resize the browser window even smaller, a scroll bar will appear. The flex-items will not wrap at all.</p>
</body>
flex item 1
flex item 2
flex item 3

The flex-items resized smaller than specified. If you resize the browser window even smaller, a scroll bar will appear. The flex-items will not wrap at all.

Back button Table of Contents Next button