How can I ensure the text in this flexbox
Line 1 - 2B Phillies
Line 2 - Acquired by: Draft 2001 (1-15)
Appears on 2 rows but aligned around the center of the picture? Aligned to the top would be ok if centring is too complex.
HTML:-
<!doctype html>
<html lang="en">
<head>
<title>gameplan.org.uk | A site for enthusiasts by enthusiasts.
</title>
<link href="test.css" rel="stylesheet">
</head>
<header>Header</header>
<div id='main'>
<article>Player Page
<p>
<div class='playercontainer'>
<div class='playerbox1'>
<img src='800803.jpg' alt='Chase Utley'>
2B Phillies
<p>Acquired by: Draft 2001 (1-15)</p>
</div>
<div class='playerbox2'>Player WAR</div>
<div class='playerbox3'>Player Details</div>
</div>
</p>
</article>
<nav>Menu</nav>
<aside>Stuff</aside>
</div>
<footer>Footer</footer>
</body>
CSS:-
body {
font: 24px Helvetica;
background: #999999;
color: rgba(0, 0, 0, .25);
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
#media all and (max-width: 640px) {
#main,
#page {
-webkit-flex-flow: column;
flex-flow: column;
}
#main > article,
#main > nav,
#main > aside {/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}
/*On the flex container*/
.playercontainer {
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: wrap;/* Safari */
flex-wrap: wrap;
-webkit-justify-content: center;/* Safari */
justify-content: center;
-webkit-justify-content: space-around;/* Safari */
justify-content: space-around;
}
.playerbox1 {
border-style: solid;
border-color: #0000ff;
-webkit-order: 1;/* Safari */
order: 1;
-webkit-flex: 0 0 60%;
flex: 0 0 60%;
margin: 5px;
height: 135px;
}
.playerbox2 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%;
/* Safari */
flex: 0 0 30%;
-webkit-order: 1;
/* Safari */
order: 2;
margin: 5px;
}
.playerbox3 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%;
/* Safari */
flex: 0 0 80%;
-webkit-order: 1;
/* Safari */
order: 3;
margin: 5px;
}
Test site is here
Give this properties to the flex container
flex-direction: column;
justify-content: center;
There's an awesome cheatsheet to flexbox on css-tricks, i'll leave the link here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
This question already has answers here:
A grid layout with responsive squares
(5 answers)
Closed 5 years ago.
In process of learning flexbox, and confused about having perfect CSS circles that are responsive. How do I do that? As it stands, my current code has circle1, circle2, and circle3 at 100 width, and height. I don't want to hard-code their height but rather make it responsive. Is there a way to have a perfect circle in %? So it scales each time the browser is resized?
Or are media queries the only option to fix this?
Thank you for your help.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
font-weight: 100;
}
body {
display: flex;
margin: 0;
flex-direction: column;
}
main {
display: flex;
flex: 1 0 100%;
/*for content and sidebar */
flex-direction: row;
}
/* main */
#content {
flex: 1 0 80%;
/* for header/logo and description */
display: flex;
flex-direction: column;
}
#description img {
display: block;
}
#header {
flex: 1 0 5%;
padding: 10px;
/* for test */
display: flex;
justify-content: center;
}
#test {
display: flex;
flex-direction: row;
}
#header h1 {
text-align: center;
font-size: 5em;
padding: 0;
margin: 0;
font-family: 'Satisfy', cursive;
}
h1 {
font-family: 'Satisfy', cursive;
}
#description {
flex: 1 0 10%;
padding: 30px;
display: flex;
}
#description p {
padding-left: 20px;
font-size: 20px;
}
#description img {
width: 250px;
height: 250px;
border-radius: 50%;
border: 6px solid #db6525;
border: 6px solid #00B2AC;
}
#name {
font-size: 35px;
color: #db6525;
font-family: 'Satisfy', cursive;
}
#test img {
display: inline;
vertical-align: text-top;
width: 100px;
height: 100px;
/* for the following image and description */
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
#sidebar {
flex: 1 0 20%;
/* background-color: green; */
text-align: center;
line-height: 90%;
/* for sidebar contents */
display: flex;
flex-direction: column;
}
#js {
flex: 1 0 33.33333%;
/* background-color: red; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#js h1 {
font-size: 50px;
}
#forms {
flex: 1 0 33.33333%;
/* background-color: gray; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#forms h1 {
font-size: 50px;
}
#sites {
flex: 1 0 33.33333%;
/* background-color: Chartreuse; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#sites h1 {
font-size: 50px;
}
.circles {
flex: 0 0 5%;
/* for circles within */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.circle1 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle1 h1{
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle2 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle2 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle3 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle3 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
<main>
<section id="content">
<article id="header">
<section id="test">
<h1>My Website</h1>
</section>
</article>
<article id="description">
<img src='images/profilePic.png' />
<p></p>
</article>
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Contact</h1>
</div>
</article>
</section>
<section id="sidebar">
<article id="js">
<h1>Javascript</h1>
<p>Mini JS Projects</p>
<p class="subtitle">Work in progress
</article>
<article id="forms">
<h1>Free Forms</h1>
<p>Feel free to download the forms</p>
</article>
<article id="sites">
<h1>Portfolio</h1>
<p>Combination of previous work and additional sites</p>
</article>
</section>
</main>
The question now is How to have a perfect responsive css square? Because when you have a square, you will easily have a circle with border-radius: 50%. Now you can found so many solution for it in SO. Here is a nice solution with flexbox item.
.flex-container {
padding: 0;
margin: 0;
display: flex;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
flex: 1 0 auto;
border-radius: 50%;
}
.flex-item:before {
content:'';
float:left;
padding-top:100%;
}
<div class="flex-container">
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
</div>
Updated answer
I reworked the flex containers to a minimal working example. The flex-items should all be set to
flex: 1 1 auto /* flex-grow flex-shrink flex-basis */
This allows the circle h1 flex-items to grow and shrink as necessary. It might be necessary to use js to obtain the height of a circle from its expanded width when you apply the example to your code.
Hope this helps.
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.circles {
/* for circles within */
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.circle1,
.circle2,
.circle3 {
display: flex;
flex: 1 1 auto;
width: 33vw;
height: 33vw;
}
.circle1 h1,
.circle2 h1,
.circle3 h1 {
flex: 1 1 auto;
width: 100%;
height: 100%;
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius: 50%;
text-align: center;
vertical-align: middle;
}
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Content</h1>
</div>
</article>
I am trying to get two containers to sit side by side when media query is applied and cannot seem to achieve that goal. This is a simple header with three columns and a footer. The goal is to have both Nav and Aside on the same row side by side. Whilst I can get the two row reduced in size I cannot get it to wrap.
Many thanks in advance
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 100vh;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
#media all and (max-width: 640px) {
#main,
#page {
flex-direction: column;
}
#main > aside,
#main > nav {
width: 47%;
order: 1;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}
<body>
<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
flex-direction: column; was not nessisary once I added flex-flow: row wrap; and min-height: auto;
You'll notice I also gave the <article> tag a min-height just so the page still looked ok.
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 100vh;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
#media all and (max-width: 640px) {
#main {
flex-flow: row wrap;
min-height: auto;
}
#main > aside,
#main > nav {
order: 1;
width: 47%;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
}
#main > article {
min-height: 300px;
}
}
<body>
<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
Hopefully, it's what you're looking for.
I have done a flexbox grid, it combines text cells with image cells. All the cells have the same height in each resolution, also text cells. Text cells have the text centered vertically, and this is a must. Now I need to assign each text cell a different background-color, but here I have the problem.
With align-items: center the text is centered vertically, but the background color is only applied to the text. Without align-items: center the background expands to all the cell, but the content is not centered vertically.
Here is the codepen
Any suggestions in how to achieve the two features at same time?
vertically centered text
different background-color for each text cell
Thanks!
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
background: #333;
padding: 30px;
font-family: Helvetica;
}
a {
color: white;
text-decoration: none;
}
h2 {
font-size: 1.2em;
}
.wrap-items {
background-color: #ccc;
padding: 0;
margin: 0 auto;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
.wrap-items .item {
-webkit-box-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 1 0 33.333%;
width: 33.33333%;
margin: 0;
padding: 0;
color: white;
font-size: 0;
border: none;
background-color: steelblue;
}
.wrap-items .item.span-2 {
-webkit-box-flex: 2 0 auto;
-ms-flex: 2 0 auto;
flex: 2 0 auto;
width: 66.6666%;
height: auto;
}
.wrap-items .item img {
width: 100%;
height: auto;
}
.wrap-items .item > .text {
padding: 10px;
font-size: 20px;
height: 100%;
}
.item.un .text{
background-color: orange;
}
.item.dos {
background-color: brown;
}
.item.tres {
background-color: violet;
}
#media screen and (max-width: 760px) {
.wrap-items .item {
margin: 0;
flex: 50%
}
}
#media screen and (max-width: 400px) {
.wrap-items .item {
margin: 0;
flex: 100%;
}
}
Use transforms instead of flexbox to vertically center the text.
1) Remove align-items: center from the .wrap-items class
2) Adjust the .wrap-items .item > .text class like this:
.wrap-items .item > .text {
padding: 10px;
font-size: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Updated Codepen
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
background: #333;
padding: 30px;
font-family: Helvetica;
}
a {
color: white;
text-decoration: none;
}
h2 {
font-size: 1.2em;
}
.wrap-items {
background-color: #ccc;
padding: 0;
margin: 0 auto;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: row;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
justify-content: center;
//align-items: center;
//align-content: center;
}
.wrap-items .item {
-webkit-box-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 1 0 33.333%;
width: 33.33333%;
margin: 0;
padding: 0;
color: white;
font-size: 0;
border: none;
background-color: steelblue;
position: relative;
}
.wrap-items .item.span-2 {
-webkit-box-flex: 2 0 auto;
-ms-flex: 2 0 auto;
flex: 2 0 auto;
width: 66.6666%;
height: auto;
}
.wrap-items .item img {
width: 100%;
height: auto;
}
.wrap-items .item > .text {
padding: 10px;
font-size: 20px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.item.un {
background-color: orange;
}
.item.dos {
background-color: brown;
}
.item.tres {
background-color: purple;
}
#media screen and (max-width: 760px) {
.wrap-items .item {
margin: 0;
flex: 50%
}
}
#media screen and (max-width: 400px) {
.wrap-items .item {
margin: 0;
flex: 100%;
}
}
<div class="wrap-items">
<!-- row 1 -->
<div class="item span-2">
<div class="text">
<h2>THE TITLE</h2>
<p>Just be water my friend</p>
<p>Small people can do very big things.</p>
</div>
</div>
<div class="item">
<img src="https://placekitten.com/g/800/600" alt>
</div>
<!-- row 2 -->
<div class="item un">
<div class="text ">
one or more lines of text inside the box
</div>
</div>
<div class="item">
<img src="https://placekitten.com/g/800/600" alt>
</div>
<div class="item dos">
<div class="text">
text in the middle
</div>
</div>
<!-- row 3 -->
<div class="item">
<img src="https://placekitten.com/g/800/600" alt="">
</div>
<div class="item tres">
<div class="text">
three lines of text centered vertically in the middle of the box
</div>
</div>
<div class="item">
<img src="https://placekitten.com/g/800/600" alt>
</div>
</div>
I was experimenting with flexbox and created this layout. I'm trying to get the middle white box that says "hey" to be 90% width/height of the parent but percentages don't seem to affect it. (I have it set as 100px/100px currently which works)
It's strange since the parent has a defined width/height on inspection.
Can anyone tell me how to implement that? (also, general critique on how I used flexbox appreciated as well)
http://jsfiddle.net/yv3Lw5gy/1/
relevant class:
.super-thing{
height: 100px;
width: 100px;
background-color: white;
margin:auto;
box-shadow: 2px 1px 1px #000;
}
The .body parent of .super-thing is display: flex so its children don't inherit its height or width if they don't have flex properties.
###The power of flex compels you!
Set flex: 1 on .super-thing so it grows and shrinks with a 1% margin to create a gap. There is no need for a width or height.
.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
###Complete Example
In this example, the box-sizing: border-box and the removal of the margin to be replaced with padding on <body>, get the entire container properly sized in the viewport so there is no scrollbar.
* {
background-color: rgba(255, 0, 0, .2);
box-sizing: border-box;
}
* * {
background-color: rgba(0, 255, 0, .2);
}
* * * {
background-color: rgba(0, 0, 255, .2);
}
* * * * {
background-color: rgba(255, 0, 255, .2);
}
* * * * * {
background-color: rgba(0, 255, 255, .2);
}
* * * * * * {
background-color: rgba(255, 255, 0, .2);
}
html,
body,
.container {
height: 100%;
}
body {
padding: 10px;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
/* align-content: center; */
}
.header {
flex: 1 0 30px;
display: flex;
}
.header-left {
flex: 11 0 auto;
}
.header-right {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.header-right .small-item {
width: 100%;
outline: 1px solid #fff;
}
.main {
background-color: #fff;
flex: 10 0 30px;
display: flex;
}
.left-column {
flex: 3;
flex-direction: column;
display: flex;
justify-content: center;
}
.left-column .story {
flex: 2;
outline: 1px solid white;
/* margin:auto; */
}
.right-column {
flex: 12;
background-color: #f0f;
display: flex;
flex-direction: column;
}
.right-column-body {
flex: 10;
display: flex;
flex-direction: column;
}
.right-column-body .header {
flex: 1;
display: flex;
justify-content: center;
}
.thing {
width: 20%;
margin: 5px
}
.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
.right-column-body .body {
background-color: #ccc;
flex: 5;
display: flex;
flex-direction: column;
justify-content: center;
}
.right-column-footer {
flex: 1;
background-color: white;
}
.footer {
flex: 1 0 30px;
}
<div class="container">
<div class="header">
<div class="header-left">Left</div>
<div class="header-right">
<div class="small-item">A</div>
<div class="small-item">B</div>
<div class="small-item">C</div>
<div class="small-item">D</div>
</div>
</div>
<div class="main">
<div class="left-column">
<span class="story">A</span>
<span class="story">A</span>
<span class="story">A</span>
<span class="story">A</span>
</div>
<div class="right-column">
<div class="right-column-body">
<div class="header">
<div class="thing">A</div>
<div class="thing">B</div>
<div class="thing">C</div>
</div>
<div class="body">
<div class="super-thing">Hey</div>
</div>
<div class="right-column-footer">Footer</div>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
In safari, i can't make the text move to the middle of the box.
Its always on the top. How do i make the text stay in the middle of the box?
here is my code i'm working on:
http://jsfiddle.net/cyberjo50/B62XX/
#menu {
clear: both;
height: auto;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
/*padding:10px;*/
margin: 5px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
font-style: normal;
font-weight: 400px;
flex-flow: row wrap;
justify-content: space-around;
}
#menu a:link {
display: block;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:visited {
display: block;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:hover {
display: block;
color: #fff;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:active {
display:block;
color: #fff;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-style: normal;
font-weight: bold;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
Thanks in advance
Try to add this in css for #menu and play further with numbers and tweaking:
text-align:center; line-height:50px;