I'm trying to make a sticker footer by flexbox; however, it's not working. It's still up about half of the screen. Here's my HTML and CSS code: .page { flex: 1 0 auto; } html { height: 100%; } body…
I'm looking for a more elegant way to align the right icons with the left text vertically, as the negative margin might be a little bit of a hack. div.main { border: 1px solid black; padding: 14px; } div.icons {…
I keep running into this problem and haven't found a good solution that doesn't cause layout issues. What's the best way to display an array of items, sorted alphabetically, in columns? I'm using ng-repeat to iterate over an array and…
I have a ul element of height 270px. There are 10 li elements inside it. I want all the li elements to be vertically justified -- i.e. the top and bottom li elements must touch the top and bottom of…
I've been putting together a block that will display latest posts from WordPress in a grid (Twitter Bootstrap) and I decided to 'play' with flexbox for the first time. I'm getting my head around it slowly, but I'm finding that…
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills"…
For a better idea of what I'm trying to do I created this photoshop mockup of a mobile, tablet, and desktop view: HTML <div class="wrapper"> <ul class="flex-container"> <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> <li><div>8</div></li> <li><div>9</div></li> <li><div>10</div></li> <li><div>11</div></li> <li><div>12</div></li> <li><div>13</div></li>…
For a better idea of what I'm trying to do I created this photoshop mockup of a mobile, tablet, and desktop view: HTML <div class="wrapper"> <ul class="flex-container"> <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> <li><div>8</div></li> <li><div>9</div></li> <li><div>10</div></li> <li><div>11</div></li> <li><div>12</div></li> <li><div>13</div></li>…