All geek questions in one place

Center Center Div Using Flexbox

I am trying to center the div vertically using flexbox . I have li's with height height:100px . Then I tried to vertically center it like this: align-items: center , and the top is clipped.

How can I vertically center something using flexbox without trimming the top?

Here's the JSFiddle , and here's the code snippet:

 body, html { height: 100%; margin: 0; padding: 0; } #flexWrapper { display: flex; justify-content: center; background-color: aqua; height: 100%; align-items: center; /* This statement makes the problem */ overflow: auto; } #flexContainer { width: 70%; list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-start; } li { background-color: tomato; border: 1px solid black; box-sizing: border-box; flex-basis: calc(100%/3); height: 100px; } 
 <div id="flexWrapper"> <ul id="flexContainer"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li class="flex-item">6</li> <li class="flex-item">7</li> <li class="flex-item">8</li> <li class="flex-item">9</li> <li class="flex-item">10</li> <li class="flex-item">11</li> <li class="flex-item">12</li> <li class="flex-item">13</li> <li class="flex-item">14</li> <li class="flex-item">15</li> <li class="flex-item">16</li> <li class="flex-item">17</li> <li class="flex-item">18</li> <li class="flex-item">19</li> <li class="flex-item">20</li> <li class="flex-item">21</li> <li class="flex-item">22</li> <li class="flex-item">23</li> <li class="flex-item">24</li> </ul> </div>
+5
source share
2 answers

There is nothing wrong with your Flex-Fu, it's that outside of your flexboxes that give you unwanted results. Take a look at the Fiddle and / or snippet below:

Fiddle

 html { box-sizing: border-box; font: 400 16px/1.5 'Source Code Pro'; height: 100vh; width: 100vw; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0 solid transparent; } #flexWrapper { display: flex; justify-content: center; background-color: aqua; height: 100%; align-items: center; /* This statement makes the problem */ overflow: auto; } #flexContainer { width: 70%; list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-start; } li { background-color: tomato; border: 1px solid black; box-sizing: border-box; flex-basis: calc(100%/3); height: 100px; } 
 <div id="flexWrapper"> <ul id="flexContainer"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li class="flex-item">6</li> <li class="flex-item">7</li> <li class="flex-item">8</li> <li class="flex-item">9</li> <li class="flex-item">10</li> <li class="flex-item">11</li> <li class="flex-item">12</li> <li class="flex-item">13</li> <li class="flex-item">14</li> <li class="flex-item">15</li> <li class="flex-item">16</li> <li class="flex-item">17</li> <li class="flex-item">18</li> <li class="flex-item">19</li> <li class="flex-item">20</li> <li class="flex-item">21</li> <li class="flex-item">22</li> <li class="flex-item">23</li> <li class="flex-item">24</li> </ul> </div>

Corresponding code

 html { box-sizing: border-box; font: 400 16px/1.5 'Source Code Pro'; height: 100vh; width: 100vw; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0 solid transparent; }

I reset CSS ✲ , then applied height: 100vh and width: 100vw to <html> so that every inch of your layout is viewable - without unsightly clipping. More information about vh and vw can be found here .

✲ All CSS reset rulsets are optional, the only properties required are vh and vw .

0
source

Is this acceptable?

 #flexWrapper { justify-content: center; background-color: aqua; height: 100%; width:70%; margin:0 auto; }

http://codepen.io/damianocel/pen/gavEzv

In order for it to respond, you will have to use the% values ​​instead of px.

Really depends on how you want the layout to look, always 3 rows and 8 columns?

-1
source

Source: https://habr.com/ru/post/1234408/

More articles:


All Articles