How do I "vertically center" two flex items?

How do I "vertically center" two flex items? - css

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.

Related

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

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>

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;
}

Nested flexbox not working in Safari 10.1.2

I have some nested flexbox layouts which work perfectly in Chrome & Safari 11+, but behaves incorrectly in Safari 10.1.2
In Chrome - it looks as expected:
Chrome behaviour
However in Safari 10.1.2:
Safari behaviour
Could someone help me figure out how to fix? Thanks!
Here's my (slightly simplified) HTML:
<div class="content-canvas">
<div class="horizontal-section" id="blog">
<h1>Blog</h1>
<div id="divRss">
<ul class="feedEkList">
<li>
<div class="itemTitle"><a href="#</a></div>
<div class="itemDate">10/16/2017</div>
<div class="itemContent">Some text</div>
</li>
<li>
As above
</li>
</ul>
</div>
Read more
</div>
<div class="horizontal-section" id="upcoming">
...
</div>
</div>
And my CSS:
.content-canvas {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-grow: 2;
-moz-flex-grow: 2;
-ms-flex-grow: 2;
-o-flex-grow: 2;
flex-grow: 2;
}
#blog,
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
#divRss,
{
padding: 10px;
height: 0;
-webkit-flex-grow: 2;
-moz-flex-grow: 2;
-ms-flex-grow: 2;
-o-flex-grow: 2;
flex-grow: 2;
}
.feedEkList,
{
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
justify-content: space-around;
}
.feedEkList li,
{
height: 0;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-grow: 1;
-o-flex-grow: 1;
flex-grow: 1;
}

I personally had a problem on Safari when the content of my upper flexbox was more than 100% of its height, in which case the nested flexbox had its height shrunk to 1px.
I fixed it by setting flexbox-shrink: 0 on nested flexbox.

Prefix Purpose & Functionality

What function do vendor prefixes serve in the code below? Do they call capabilities from other sites?
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* works with row or column */
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

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.