How to make all blocks of the same width?

Question

How to make blocks of the same width? It is necessary that the blocks fill the entire width of the screen, and started from the left edge.

It turns out only that the last block occupies the entire width. The last seventh block should not fill the entire width, it should be like the first six, while it should be responsive. I need to use only flexbox, media queries and scripts will not work for me.

=

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
      
html, body {
  height: 100%;
  background: #000000;
}
      
header,
footer {
  background-color: #ffffff;
  padding: 20px;
}
      
ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 5px;
}
      
li {
  width: 350px;
  flex-grow: 1;
  padding: 20px;
  margin: 3px;
  border-radius: 5px;
  background-color: #1b6351;        
}
      
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container {
   flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
}

<!DOCTYPE html>
<html>
<body>
    <div class="wrapper">
    <header>top</header>
    <div class="container">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>
    <footer>bottom</footer>
    </div>
  </body>
</html>

I don't understand the question? everything appears to be working correctly — Oneezy, Dec 19 '18 at 18:16
I have a video of the kind of how it should look: https://drive.google.com/file/d/1L8fNpkKOAhU48CbkwczmlAVxJMKTck3p/view — Дима Юрченко, Dec 19 '18 at 18:48
https://stackoverflow.com/questions/42767664/flex-wrapped-items-with-same-width-as-the-rest/42767892#42767892 Just one out of many duplicate questions. — VXp, Dec 19 '18 at 19:24

score 0 · Answer 1 · answered Dec 19 '18 at 18:19

0

If I have understood your question properly, you are just missing flex-basis: 100%; on the li.

See working example here https://codepen.io/Angel-SG/pen/aPBrje

Hope that helps!

answered Dec 19 '18 at 18:19

ASG

513
3
10

Not really, it should look like this. The last seventh block should be as wide as the first six. Look in full screen please – Дима Юрченко Dec 19 '18 at 18:30
Ups sorry, I just amended the code pen, have a look! – ASG Dec 19 '18 at 18:34
I have a video of the kind of how it should look: https://drive.google.com/file/d/1L8fNpkKOAhU48CbkwczmlAVxJMKTck3p/view?usp=sharing – Дима Юрченко Dec 19 '18 at 18:37

score 0 · Answer 2 · answered Dec 19 '18 at 19:29

Thing is you should add equal/ min-width to each media query for your desired result. I have styled a little and added media query.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
      
html, body {
  height: 100%;
  background: #fff;
}
      
header,
footer {
  background-color: #ddd;
  padding: 20px;
}
      
ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  flex-direction: row;
  padding: 5px;
}
      
li {
  flex-wrap: wrap;
  padding: 5px;
  border-radius: 2px;
  min-width: 20%;
}
li > div{
  display:block;
  background:#cdcdcd;
  text-align:center;
  padding:15px;
  border-radius:3px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container {
   flex: 1 0 auto;
  background:#fefefe;
}

footer {
  flex: 0 0 auto;
}

@media (max-width:1200px){
  ul li{
    min-width:25%;
  }
}

@media (max-width:1024px){
  ul li{
    min-width:33.33%;
  }
}

@media (max-width:768px){
  ul li{
    min-width:50%;
  }
}

@media (max-width:540px){
  ul li{
    min-width:100%;
  }
}

<!DOCTYPE html>
<html>
<body>
    <div class="wrapper">
    <header>Header</header>
    <div class="container">
      <ul>
        <li><div>1</div></li>
        <li><div>2</div></li>
        <li><div>3</div></li>
        <li><div>4</div></li>
        <li><div>5</div></li>
        <li><div>6</div></li>
        <li><div>7</div></li>
      </ul>
    </div>
    <footer>Footer</footer>
    </div>
  </body>
</html>

score 0 · Answer 3 · answered Dec 20 '18 at 06:08

Hope this will help for you!

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
      
html, body {
  height: 100%;
  background: #000000;
}
      
header,
footer {
  background-color: #ffffff;
  padding: 20px;
}
      
ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 5px;
}
      
li {
    /* width: 350px; */
    flex-grow: 1;
    padding: 20px;
    margin: 3px;
    border-radius: 5px;
    background-color: #1b6351;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 350px;    
}
      
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container {
   flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
}

 <div class="wrapper">
    <header>top</header>
    <div class="container">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>
    <footer>bottom</footer>
    </div>

How to make all blocks of the same width?

3 Answers3