Elements in a Flex Container Are Not Wrapping

Why are flex items not wrapping?

An initial setting of a flex container is flex-wrap: nowrap.

This means that when you create a flex container (by applying display: flex or display: inline-flex to an element) all child elements ("flex items") are confined to a single line.

To enable flex items to wrap use flex-wrap: wrap.

Here are a few examples of how flex properties work:

A simple flex container with various flex items containing an image:

#list-wrapper {    display: flex;    border: 1px solid black;}
#list-wrapper div {}
#list-wrapper div img {    height: 150px;    width: 150px;}

<div id="list-wrapper">    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div></div>

Why are my flex items not wrapping?

You need to use a media query to change the width of .flex-item. Unless you do this, it will always make them 30% of the window so they'll never wrap.

I included an example where I replaced your images with some stock images and included a media query to make it wrap at 600px.

  /* Flexbox */
.intro .flex-container {  width: 100%;  display: flex;    flex-direction: row;    justify-content: center;    flex-wrap: wrap;}
.intro .flex-item {  width: 30%;  flex-direction: column;}
.intro .img-fluid {  width: 90%;  padding: 2rem 0rem 2rem 0rem;} 
@media screen and (max-width:600px) {  .intro .flex-item {    width:50%;  }}

<div class="intro">    <section id="intro-box">      <h2>In a nutshell</h2>      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand        beaches.      </p>      <div class="flex-container">
        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>
        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>
        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>      </div>    </section>  </div>

Text not wrapping inside a flex container

I have a solution that seems to work but I do not that it is 100% correct, here is a fiddle:

https://jsfiddle.net/2xxorq4n/1/

And here is the CSS code:

body {
  width: 90%; 
  margin: 3em auto;
  background-color: #aaa;
}
section {
  border:1px solid black;
}
.title {
  text-align: center;
  background-color: #eee;
}
.image { 
  background-color: #ccc;
}
.image img {
  display: block; 
  max-height: 100%; 
  max-width: 100%;
}
.text { 
  background-color: #96AED1;
}
/* FLEX STYLES */
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.title, .image, .text {
  flex: 1 100%;
}
@media all and (min-width: 600px) {
  .image { flex: 1 auto; }
}
@media all and (min-width: 800px) {
  .text { flex: 800 0px; }
  .image { order: 1; }
  .text { order: 2; }
}

Specifically, I do not think that this is correct: .text { flex: 800 0px; }. Although it seems to work, I do not think that it is supposed to work like that as the example on css tricks website which provides further information on Flexbox usage shows flex: 2 0px;:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex-wrap is not wrapping when I reduce the window size

You need to use max-width instead of width on the container, you have to allow the container to shrink for the items to wrap.

body {  font-family: arial;}
p {  color: white;}
.container {  background-color: #666;  max-width: 800px;  height: 200px;  margin: 0 auto;  display: flex;  flex-wrap: wrap;  justify-content: center;}
.item {  padding: 10px;  box-sizing: border-box;}
.item1 {  flex: 1;  background-color: red;}
.item2 {  flex: 1;  background-color: blue;}
.item3 {  flex: 1;  background-color: green;}

<div class="container">
  <div class="item item1">    <h1>ITEM1</h1>    <p>flex: 1</p>  </div>
  <div class="item item2">    <h1>ITEM2</h1>    <p>flex: 1</p>  </div>
  <div class="item item3">    <h1>ITEM3</h1>    <p>flex: 1</p>  </div>
</div>

prevent wrapping lines in flexbox child element

The property you are looking for is flex-shrink, not flex-basis.

.no-wrap{
  flex-shrink: 0;
}

Note however, that IE10 is not listed as supporting this property (as it did not exist in the specification at the time they added the Flexbox implementation). You can use the flex property instead.

.no-wrap{
  flex: 0 0 auto; 
}

Why is these flex items not wrapping?

Your flex items in the nested container are sized with percentages.

.col-one{
  width: 40%;
  height: 100px;
  border: 1px solid lightgreen;
}
.col-two{
  width: 40%;
  height: 100px;
  border: 1px solid red;
}

Because percentage lengths are based on the length of the parent they have no reason to wrap. They will always be 40% of the parent, even if the parent has a width of 1%.

If you use other units for length, such as px or em, they will wrap.

jsFiddle demo

 .container {   display: flex;   justify-content: center;   align-items: center;   flex-flow: row wrap;   height: 100vh; }  .sub-con {   flex: 1;  /* for demo only */   align-content: flex-start; /* for demo only */   margin-right: 50px;   margin-left: 50px;   height: 500px;   background-color: #fff;   display: flex;   justify-content: center;   flex-flow: row wrap; }  .col-one {   width: 200px;   height: 100px;   border: 1px solid lightgreen; }  .col-two {   width: 200px;   height: 100px;   border: 1px solid red; }

<div class="container">  <div class="sub-con">    <div class="col-one"></div>    <div class="col-two"></div>  </div></div>

Flex items not wrapping in a column direction container

Apply total height on ul and make it wrap.

Then apply flex-basis on ul li (which is height because we've applied flex-direction: column) to 50%. Like:

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%; /* which in this case will be '50px' */
}

Have a look at the snippet below:

ul {  list-style: none;  margin: 0;  padding: 0;  display: flex;  flex-wrap: wrap;  flex-direction: column;  height: 100px;}ul li {  flex-basis: 50%;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li></ul>

Elements in a flex container are not wrapping

An initial setting of a flex container is flex-wrap: nowrap. This means flex items are forced to remain in a single line.

You can override the default with flex-wrap: wrap.

The display value of flex items is ignored in flex layout.

A flex container, which is an element with display: flex or display: inline-flex, establishes a flex formatting context. Although similar to a block formatting context, there are differences.

One difference is that children of a flex container ignore the display property.

Another difference is that, in a flex container, margins don't collapse, and the float and clear properties have no effect.

A flex container also comes with several default settings. Among them:

justify-content: flex-start - flex items will stack at the start of the line
flex-shrink: 1 - flex items are allowed to shrink and will not overflow the container
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-direction: row - flex items will align horizontally
flex-wrap: nowrap - flex items are forced to stay in a single line

Note the last two items.

Flex items will line up in a row and cannot wrap.

If you want to have two flex items on the first line, and a third item on the second line, allow the container to be multi-line with flex-wrap: wrap.

.container {  display: flex;  flex-wrap: wrap;}.box {  flex: 0 0 45%;  height: 50px;  margin: 5px;  background-color: lightgreen;  border: 1px solid #ccc;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>