I have this stylus mixin:
display()
display: (-ms-)arguments
display: (-webkit-)arguments
display: arguments
Which is generating this in CSS:
.nav ul li a {
display: -ms- flex;
display: -webkit- flex;
display: flex;
}
However what I want to achieve:
.nav ul li a {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
How I can achieve this with Stylus?
Can you just use it like this since this is a special occasion for displaying as flex?
display()
display: -ms-flex
display: -webkit-flex
display: flex
.nav ul li a
display()
Or even rename it to displayFlex() so you always know what it is about.
Related
Using just CSS can somebody please show me how to add a drop down menu on the Big Cartel Neat theme.
Need help on adding subheading to the main heading for example...
About The Brand (hover mouse and subheadings appear)
Brands Philosophy
About the Founder
About Us
header .sections {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0 32px;
position: relative;
width: 50%;
z-index: 97;
}
header .sections .navigation {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
header .sections .navigation li {
display: block;
margin: 0 16px;
}
header .sections .navigation li a {
padding: 4px 0;
text-align: center;
I'm new to CSS also, but I'll try my best to help. This is what you can do.
#heading:hover .subheadings{
display: block
}
Basically, your #heading id (You'll probably only have 1, so you should use id.) is the "About The Brand" text. When you add hover, you can make something happen when the mouse hovers over the main heading. In this case, you can add the class .subheadings right after it and display it as a block element (The 3 subheadings will be stacked on top of each other). This will cause the subheadings to appear after you hover over the main heading. Basically, it's like an if then statement in Python.
I hope this explanation helps! Good luck :)
So I'm having a problem centering items from a menu I'm making.
I have tried to put justify-content: center but that does not seem to work. Can someone help?
Right now the menu is stuck on the left corner. I want to center it.
.header2 {
background-color: rgb(190, 13, 13);
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 15px;
}
.menu {
display: flex;
}
.menu li {
margin-right: 15px;
}
.menu li a {
display: block;
padding: 10px;
}
<nav class="header2">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
The nested flexbox (.menu) is set, by default, to flex-grow: 0, which means it won't occupy the full length of the parent.
Therefore, applying justify-content: center has no effect because there's no free space available in the container.
Adding flex-grow: 1 provides the extra space you need:
Add this to your code:
.menu {
display: flex;
flex: 1;
justify-content: center;
}
Also, since you're already using the semantically meaningful nav element, there's really no need for a nested list element. Try this simplified code instead:
.menu {
display: flex;
justify-content: center;
background-color: rgb(190, 13, 13);
}
.menu a {
padding: 25px 10px;
}
.menu a:hover {
background-color: orangered;
}
<nav class="menu">
Home
About
Products
Contacts
</nav>
Try:
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-grow: 1; /* or width: 100% */
}
if you want the elements evenly distributed by all the width.
And:
.menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1; /* or width: 100% */
}
otherwise.
I am having difficulty top aligning my 3 columns with multiple "rows". If I use the CSS property align-items: flex-end; I get the correct results, but elements are aligned at the bottom. If I try align-items: flex-start; nothing happens.
In the fiddle I would like the red block to move up so it is right bellow the Purple Heading.
Please see fiddle
Any help would be great!
I think you need to change html structure a little bit, if you want to make your task. I propose two versions to solve this issue. You can see it on the Fiddle.
Fiddle 1 - https://jsfiddle.net/AndrewKovalchuk/c6o4gdmh/
.categories {
display: flex;
flex-wrap: wrap;
}
.categories > ul {
margin: 0;
width: 33.33%;
box-sizing: border-box;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
Fiddle 2 - https://jsfiddle.net/AndrewKovalchuk/q6jt2d8h/
.categories {
display: flex;
flex-wrap: wrap;
}
.categories .category {
width: 33.33%;
display: flex;
flex-direction: column;
}
.category > ul {
margin: 0;
box-sizing: border-box;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
set flex-direction: column and give it a fixed height.
height: 400px;
flex-direction: column;
Fiddle - https://jsfiddle.net/0eqLf321/40/
This is what I expect (tested in Chrome and Firefox):
This is how it looks in Safari Version 9.0.2 (11601.3.9)
Quick jsfiddle to show you an example:
https://jsfiddle.net/qbozL26m/1/
CSS:
.container {
padding-top: 20px;
}
.equal-height {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
display: flex;
//align-items: center;
//
.well {
width: 100%;
}
}
Edit:
Gif och Chrome-behaviour (correct)
Gif of Safari behaviour (incorrect)
Edit 2:
I've come up with a solution to fix it for safari, it's not that good though because it overrides bootstraps column sizes.
.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
display: flex;
flex-basis: 33%;
}
I have a variable set of images I'm displaying in a flexbox, and am trying to make sure the images vertically and horizontally align to their parent div. I've tried the usual vertical-align, text-align, max-width: 100%;, and margin: 0 auto;. Any good cross browser solutions to my dilemma that won't lead to warped/left-aligned images?
Here's the CSS (in it's current borky form, I've also tried the other aforementioned centering CSS):
.collage{
max-width: 100%;
max-height: 100%;
height: inherit;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
flex-direction: column;
}
.collage div{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
overflow: hidden;
width: 100%;
}
.collage img{
max-height: 100%;
}
jsfiddle: http://jsfiddle.net/hSb93/3/
if you add margin: auto; to .collage img it solves it.
But flexbox is not supported by all browsers.
If you want it to be fully cross-browser you can put a span before the image and put this CSS in it:
CSS
.collage div{
text-align: center;
}
span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
HTML
<div>
<span></span>
<img>
</div>