Flexbox - I align items with flexbox but they are no center - css

So I am breaking my head over this. I have set global styles and I amtrying to align a logo and a navigation list one beneath the other. When I use flexbox to align it they are not actually in center. However, when I remove the global style for padding completely it aligns fine.
What seems to be the problem.
P.S. I used sass staright away.
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 5px;
}
body {
font-family: "Nunito", sans-serif;
}
li {
list-style: none;
}
a {
width: 100%;
text-decoration: none;
color: #033860;
}
.main-head {
width: 100%;
min-height: 20vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
background-color: #05b2dc;
}
.main-head .container {
width: 80%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.main-head .logo {
fill: white;
width: 10%;
}
.main-head .main-nav {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.main-head .main-nav .nav-list {
padding: initial;
width: 80%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.main-head .main-nav .nav-list .nav-item {
font-size: 3rem;
}
<header class="main-head">
<div class="container">
<svg
class="logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 299.92 81.73"
>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path
d="M79,70.79a6.86,6.86,0,0,1-2.19,5.26,7.67,7.67,0,0,1-5.42,2,9.62,9.62,0,0,1-4-.81L7.28,51.7A12.07,12.07,0,0,1,2,47.42a11.86,11.86,0,0,1,0-13,10.87,10.87,0,0,1,5.33-4.2l60-25.72a11.18,11.18,0,0,1,4-.81,7.67,7.67,0,0,1,5.42,2A6.86,6.86,0,0,1,79,10.94a6.13,6.13,0,0,1-4.06,6L17.8,40.86l57.09,24A6.13,6.13,0,0,1,79,70.79Z"
/>
<path
d="M149.32,1.82c1.62,1.4,2.42,3.51,2.42,6.31s-.7,5.07-2.1,6.47-3.93,2.32-7.6,2.75l-4.85.49q-9.56,1-14,6.47c-3,3.66-4.45,8.24-4.45,13.75V72a9,9,0,0,1-2.91,7.2,10.78,10.78,0,0,1-7.28,2.5,10.42,10.42,0,0,1-7.2-2.5c-1.9-1.67-2.83-4.07-2.83-7.2V9.42a8.61,8.61,0,0,1,2.83-6.95,10.38,10.38,0,0,1,7-2.43,9.75,9.75,0,0,1,6.79,2.35,8.61,8.61,0,0,1,2.59,6.71v6.47a24.07,24.07,0,0,1,9.14-11A27.93,27.93,0,0,1,140.42.2L142.68,0A8.77,8.77,0,0,1,149.32,1.82Z"
/>
<path
d="M211.27,1.82c1.62,1.4,2.42,3.51,2.42,6.31s-.7,5.07-2.09,6.47-3.94,2.32-7.61,2.75l-4.85.49q-9.55,1-14,6.47T180.7,38.06V72a9,9,0,0,1-2.91,7.2,10.78,10.78,0,0,1-7.28,2.5,10.43,10.43,0,0,1-7.2-2.5c-1.9-1.67-2.83-4.07-2.83-7.2V9.42a8.61,8.61,0,0,1,2.83-6.95,10.4,10.4,0,0,1,7-2.43,9.73,9.73,0,0,1,6.79,2.35,8.58,8.58,0,0,1,2.6,6.71v6.47a24,24,0,0,1,9.13-11A28,28,0,0,1,202.37.2L204.63,0A8.75,8.75,0,0,1,211.27,1.82Z"
/>
<path
d="M298,34.39a11.86,11.86,0,0,1,0,13,12,12,0,0,1-5.33,4.28l-60,25.56a9.65,9.65,0,0,1-4,.81,7.67,7.67,0,0,1-5.42-2A6.83,6.83,0,0,1,221,70.79a6.11,6.11,0,0,1,4-6l57.11-24L225,16.92a6.11,6.11,0,0,1-4-6,6.83,6.83,0,0,1,2.19-5.26,7.67,7.67,0,0,1,5.42-2,11.26,11.26,0,0,1,4,.81l60,25.72A10.82,10.82,0,0,1,298,34.39Z"
/>
</g>
</g>
</svg>
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item">
about
</li>
<li class="nav-item">
portfolio
</li>
<li class="nav-item">contact</li>
</ul>
</nav>
</div>
</header>

Related

Break word into lines with word-break doesn't work in IE11

I have some text with this css:
word-break: break-word;
What it is supposed to do is to break the text into lines when I reduce the dimensions of the window. It is responsive and works fine in Chrome but has no effect in Internet Explorer 11. I've searched a lot about this but nothing solved my problem.
If it helps, this is the css class for the container of the text:
.my-class {
width: 170px;
padding-bottom: 100px;
padding-top: 100px;
padding-right: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
text-align: end;
}
Any suggestions?

For flexbox to work in IE, you can change your code to:
.my-class {
width: 170px;
padding-bottom: 100px;
padding-top: 100px;
padding-right: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
text-align: end;
display: -moz-flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
-ms-flex-pack: space-around;
box-orient: vertical;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-flow: column wrap;
}

How do I "vertically center" two flex items?

Here is the link to my project.
I want both of them to be "centered" so to speak. But yes, I know they can both take up 1 position. So I think if there is a way to draw a (invisible) horizontal line that is vertically centered. Then, I can just place one flex item right on top of this line, and the other right below it.
But I think there is a better way to do this that can be used to centered more than 2 flex items.
body{
background:#4A6556;
}
body>div>hello,hey{
background: #CCC;
border-radius: 7px;
margin: 5px;
padding: 20px;
}
body>div{
display: flex;
flex: row wrap;
flex-direction: column;
}
body>div>hey{
order:2;
font-family: 'Lato', sans-serif;
color:#212121;
}
body>div>hello{
order:1;
font-family: 'Kumar One', cursive;
color: #938653;
}
hello,
hey{
text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">
<body>
<div>
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
</body>

It's not entirely clear from your question if you want the two items displayed side-by-side or one-on-top-of-the-other.
A. side by side
.va-twins {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.va-twins > * {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
margin: 0; padding: 0; // SO reset, you don't need this.
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
If you need it, here's the fully prefixed code (for close to full browser compatibility 97.38% at the time of this posting)
.va-twins {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.va-twins > * {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
B. one on top of the other
.va-twins {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.va-twins > * {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
margin: 0; padding: 0; // SO reset, you don't need this.
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
Fully prefixed:
.va-twins {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.va-twins > * {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
You could use #media queries to switch between A. and B. on different screen sizes.

Flexbox making everything columns in Safari

I'm trying to create a two-column layout for a site and I've got everything working fine in Chrome, FireFox and IE10/11, however in Safari, the news pods are columnised, rather than sitting two per line, as they should.
Attached are two images, the top showing what I'm trying to achieve (and what I'm seeing on Chrome/FireFox/IE10 and 11) and the bottom shows what's happening in Safari.
The CSS I'm using to achieve this is as follows:
.news__listing {
float: left;
display: block;
margin-right: 3.84615%;
width: 65.38462%;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-moz-box-align: start;
box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: start; }
.news__listing:last-child {
margin-right: 0; }
.news__listing:nth-child(2n) {
margin-right: 0; }
.news__listing:nth-child(2n+1) {
clear: left; }
.news__listing .c-article {
max-width: 50%;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
flex-shrink: 0;
-ms-flex-negative: 0; }
Am I doing anything obviously wrong?

OK, so after much experimentation I seem to have found the solution - seems that just setting a max-width doesn't cut it, so I've had to explicitly set width: 50%; to get everything aligning properly.

CSS: draw lines between flexboxes

I successfully created a nested flexbox layout for my pedigree. But how do I draw lines inbetween? This is possible using CSS3, see http://thecodeplayer.com/walkthrough/css3-family-tree But this example doesn't explain anything and I cannot get it to work with my code.
I am not sure if my approach makes sense: it's flexbox columns inside flex-items that are aligned in a row.
pedigree {
border: 1px solid green;
/* flex container */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
individual:nth-child(2n) {
background-color: #FFE6E6;
}
individual {
margin: 5px;
border: 1px solid red;
background-color: #E6E6FF;
/* flex item */
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
individual:before, .individual:after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
individual:after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
gen0, gen1, gen2, gen3 {
border: 1px solid blue;
/* flex item */
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: stretch;
/* flex container */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
justify-content: space-around;
}
ind_name, ind_birth, ind_marriage, ind_death {
border:none;
display:block;
}
ind_name {
font-weight: bold;
}
ind_birth:before {
content: "* ";
}
ind_marriage:before {
content: "oo ";
}
ind_death:before {
content: "+ ";
}
<html>
<body>
<pedigree>
<gen0>
<individual>
<ind_num>1</ind_num>
<ind_name>Individual</ind_name>
<ind_birth>19 Nov</ind_birth>
</individual>
</gen0>
<gen1>
<individual>
<ind_num>2</ind_num>
<ind_name>Father</ind_name>
<ind_birth>1 Mar</ind_birth>
</individual>
<individual>
<ind_num>3</ind_num>
<ind_name>Mother</ind_name>
<ind_birth>10 Sep</ind_birth>
</individual>
</gen1>
<gen2>
<individual>
<ind_num>4</ind_num>
<ind_name>Grandfather</ind_name>
<ind_birth>1 Nov</ind_birth>
</individual>
<individual>
<ind_num>5</ind_num>
<ind_name>Grandmother</ind_name>
<ind_birth>9 Feb</ind_birth>
</individual>
<individual>
<ind_num>6</ind_num>
<ind_name>Grandfather</ind_name>
<ind_birth>5 Jan</ind_birth>
</individual>
<individual>
<ind_num>7</ind_num>
<ind_name>Grandmother</ind_name>
<ind_birth>15 Nov</ind_birth>
</individual>
</gen2>
</pedigree>
</body>
</html>

I think the right approach here would be to use svg instead of the flexbox items you are using. That still gives you a lot of control on the display (via CSS) and animations/events, while allowing you indeed to draw the lines. Accessibility might be more complex to get right, though.

Vertical align inline-flex elements

I am trying to vertical-align 3 different inline-flex elements in a same div, but the last one doesn't fit as expected.
.container {
height: 100px;
width: 100%;
background-color: blue;
}
.container .left, .container .right {
height: 100%;
width: 30%;
}
.container .middle {
height: 100%;
width: 40%;
}
.container .left, .container .middle {
display: -webkit-inline-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
display: -moz-inline-flex;
-moz-justify-content: center;
-moz-align-items: center;
}
.container .right {
display: -webkit-inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-webkit-box-pack: center;
-webkit-flex-pack: center;
-webkit-justify-content: center;
-webkit-flex-align: center;
-webkit-align-items: center;
display: -moz-inline-flex;
-moz-justify-content: center;
-moz-align-items: center;
-moz-flex-direction: column;
}
.container .right ul {
padding: 0;
margin: 0;
}
<div class="container">
<div class="left">
<span>2014/01/21</span>
</div><div class="middle">
<button>Hello</button>
<button>Bye</button>
</div><div class="right">
<ul>
<li>Chocolate</li>
<li>Caramel</li>
<li>Watermelon</li>
</ul>
</div>
</div>

Just add vertical-align:top to .container .right :
.container .right {
display: -webkit-inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-webkit-box-pack: center;
-webkit-flex-pack: center;
-webkit-justify-content: center;
-webkit-flex-align: center;
-webkit-align-items: center;
vertical-align: top;
}
JSFiddle

Resources