Flex-wrap doesn't work and i wanna know why

Question

I was playing with display: flex and its properties (order and flex) and tried to add also flex-flow: row wrap, but it seems to not work.

span {
    display: flex;
    flex-flow: wrap row;
    border: 1px solid black;
    height: 400px;
    justify-content: space-around;
}

div {
    width: 200px;
    height: auto;
    background-color: pink;
    margin: 5px;
}

div:nth-of-type(even) {
    flex: 2 200px;
    height: 50%;
    align-self: center;
    background-color: crimson;
}

.block2 {
    flex: 4 200px;
}

.block4 {
    flex: 1 100px;
    height: 25%;
    align-self:center;
}

div:first-child {
    order: -1
}

div:nth-of-type(even) {
    order: -2
}
div:last-child {
    order: 2
}


        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis placeat consequuntur illo illum eos architecto ex
            quis animi corrupti, perferendis sit. Quibusdam beatae, eligendi optio sed doloremque quisquam sunt incidunt
            eveniet ab! Inventore veniam omnis ex beatae id, sit mollitia quas numquam? Illo, quisquam nihil? Debitis quidem
            aliquid nesciunt veniam.

I suppose it is because flex-items are forced to adapt to the given free space, but what if i want to make them wrap anyway? or i should delete flex property for each item if i want so?

user_17516394 · Answer

Because span is an inline element, you can't make it a flex container. I changed the element to a div with a container class instead:

.container {
  background-color: transparent;
  display: flex;
  flex-flow: row wrap;
  border: 1px solid black;
  height: 400px;
  justify-content: space-around;
}

div {
  width: 200px;
  height: auto;
  background-color: pink;
  margin: 5px;
}

div:nth-of-type(even) {
  flex: 2 200px;
  height: 50%;
  align-self: center;
  background-color: crimson;
}

.block2 {
  flex: 4 200px;
}

.block4 {
  flex: 1 100px;
  height: 25%;
  align-self: center;
}

div:first-child {
  order: -1;
}

div:nth-of-type(even) {
  order: -2;
}
div:last-child {
  order: 2;
}


  
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis placeat
    consequuntur illo illum eos architecto ex quis animi corrupti,
    perferendis sit. Quibusdam beatae, eligendi optio sed doloremque
    quisquam sunt incidunt eveniet ab! Inventore veniam omnis ex beatae id,
    sit mollitia quas numquam? Illo, quisquam nihil? Debitis quidem aliquid
    nesciunt veniam.

Flex-wrap doesn't work and i wanna know why

1 Answers