Prefix Purpose & Functionality - css
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;
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>
flex in css3 didn't work in safari mobile
white line shows when use safari browse this page: When use safari browse this page, the white line shows, and i try to use safari's flex like this to fix this but failed. display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; the lightland.design is fully written with css and html, hope someone can save me out of this probelm. thankyou in advanced
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.