0

So I have this code where I will put 12 boxes inside a div in a row but 1 box can't fit inside.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
            <title>Flex Function Example</title>
                <style>

                div {
                display: flex;
                display: -ms-flexbox;
                display: -moz-flexbox;
                display: -o-flexbox;
                display: -webkit-flexbox;
                flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                -moz-flex-wrap: wrap;
                -o-flex-wrap: wrap;
                -webkit-flex-wrap: wrap;
                height: 200px;
                padding: 1em;
                color: white;
                outline: 2px solid silver;
                }
                div>div {
                width: 220px;
                width: -ms-flex;
                width: -moz-flex;
                width: -o-flex;
                width: -webkit-flex;
                margin: 1em;
                height: 100px;
                background-color: #b200ff;
                font-family: sans-serif;
                text-align: center;
                line-height: 100px;
                font-size: xx-large;
                }

                </style>
    </head>
<body>

    <div>
        <div>Polans</div>
        <div>Procyon</div>
        <div>Rigel</div>
        <div>Vega</div>
        <div>Orion</div>
        <div>Pegasus</div>
        <div>Perseus</div>
        <div>Pisces</div>
        <div>Gold</div>
        <div>Silver</div>
        <div>Platinum</div>
        <div>Chromium</div>
    </div>

</body>
</html>

This is the output

What should I put/replace in my code to make all the boxes fit? Also please tell me if I have unnecessary codes in my code so that I can remove them.

3 Answers 3

2

one of your box is out of the row because there no space left for it, You can simply reduce each purple box size to produce some space for the outered box. Moreover another problem is that your out of row box is also out of the parent div border. To include all boxes inside the parent div border, remove height from div selector, so that the parent div can take as much height as needed to cover all of its child divs. You can watch the final result on my codepen

            div {
            display: flex;
            display: -ms-flexbox;
            display: -moz-flexbox;
            display: -o-flexbox;
            display: -webkit-flexbox;
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -o-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            padding: 1em;
            color: white;
            outline: 2px solid silver;
0
1

To make things clear I removed all the CSS prefixes and added the .container class. To fit all the children on one line, you have to remove the flex-wrap: wrap property in the parent class and add a width: 100% property to each child like this:

.container {
  display: flex;
  height: 200px;
  padding: 1em;
  color: white;
  outline: 2px solid silver;
}

.container > div {
  width: 100%;
  margin: 1em;
  height: 100px;
  background-color: #b200ff;
  font-family: sans-serif;
  text-align: center;
  line-height: 100px;
  font-size: xx-large;
}
<div class="container">
  <div>Polans</div>
  <div>Procyon</div>
  <div>Rigel</div>
  <div>Vega</div>
  <div>Orion</div>
  <div>Pegasus</div>
  <div>Perseus</div>
  <div>Pisces</div>
  <div>Gold</div>
  <div>Silver</div>
  <div>Platinum</div>
  <div>Chromium</div>
</div>

1

Just use the table element with the td element - no css needed (i just added some in to match the styling above):

.container td div {
  width: 100%;
  margin: 1em;
  height: 100px;
  background-color: #b200ff;
  font-family: sans-serif;
  text-align: center;
  line-height: 100px;
  font-size: xx-large;
  color:white
}
<table class="container">
   <td><div>Polans</div></td>
   <td><div>Procyon</div></td>
   <td><div>Rigel</div></td>
   <td><div>Vega</div></td>
   <td><div>Orion</div></td>
   <td><div>Pegasus</div></td>
   <td><div>Perseus</div></td>
   <td><div>Pisces</div></td>
   <td><div>Gold</div></td>
   <td><div>Silver</div></td>
   <td><div>Platinum</div></td>
   <td><div>Chromium</div></td>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.