The dark gray area is clickable but the blue margin has no action. How can I expand the rest of the smaller sized items to fill in the space?
div.scrollmenu {
display:flex;
justify-content: flex-start;
align-items: center;
background-color: #333;
overflow: auto;
flex-wrap: nowrap;
}
div.scrollmenu a {
display: flex;
color: white;
text-align: left;
padding: 14px;
text-decoration: none;
margin: auto;
min-width: 25%;
max-width: 25%;
}
Add the align-items: stretch; property to your div.scrollmenu and tweak your code a bit.
div.scrollmenu {
display:flex;
/* align-items: stretch; */ /* redundant */
background-color: #333;
flex-wrap: nowrap;
}
div.scrollmenu a {
display: flex;
align-items: center;
/* uncomment this if you want them to be centered horizontally */
/*justify-content: center;*/
padding: 1 14px;
color: white;
text-align: left;
text-decoration: none;
flex: 1;
}
Hope this helps.
EDIT You don't even need align-items: stretch because I believe that's the default property since the result is the same even if you leave it out.
Related
I have this code. Text changes when scaling through vw. How to do everything the same, only through % ?
https://jsfiddle.net/Camiastrw/bdg9rotm/
CSS
.container{
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem 2rem 0.75rem 2rem;
}
.wrapper{
align-items: center;
display: flex;
}
.qwe{
height: 40px;
width: 40px;
border: 1px solid #000;
margin-right:2rem;
}
.main-content{
max-width: calc(100vw - 15rem);
}
.text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 4 years ago.
For example, in this CSS copy from Firefox Console:
.page-newsletter-sign-up-confirmation .main .webform-confirmation div {
width: 100%;
height: 100%;
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; // Line 20979
}
.newsletter-sign-up { // Line 21044
-ms-flex-pack: distribute;
justify-content: space-around; // This one is overriden by Line 20979
border: solid 1px #0a5793;
}
The SASS is:
.page-newsletter-sign-up-confirmation {
.main {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.page-title-wrapper {
#include hideH1();
}
.webform-confirmation {
text-align: center;
min-width: 800px;
width: 950px;
height: 360px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 5% auto 300px auto;
background-color: white;
#media (max-width: 1400px) {
margin: 75px auto;
}
#media (max-width: 480px) {
min-width: 0px;
width: 100%;
height: 500px;
margin: 25px;
justify-content: flex-start;
}
div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
p {
font-family: $font-light;
font-size: 48px;
font-weight: 300;
line-height: 1;
margin: 0;
letter-spacing: -1px;
#media (max-width: 480px) {
font-size: 24px;
position: absolute;
width: 100%;
top: 10%;
}
}
hr {
display: none;
height: 5px;
width: 450px;
margin: 1em auto;
}
.links {
display: block;
height: 60px;
#media (max-width: 480px){
position: absolute;
top: 30%;
}
a {
#include blackButton;
font-size: 12px;
font-weight: 700;
#media (max-width: 480px) {
font-size: 14px;
margin: 0 auto;
display: block;
width: 80%;
}
}
}
}
//#supports (-ms-ime-align: auto) { /* Edge only due to bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15947692/ */
// .newsletter-sign-up {
// justify-content: space-around;
// border: solid 1px #0a5793;
// }
//}
}
}
}
.newsletter-sign-up {
justify-content: space-around;
border: solid 1px #0a5793;
}
However, if I remove the .newsletter-sign-up at the end, and uncomment the other one, it correctly overrides the previous declaration.
This happens both in Edge 18 and in Firefox 66.
So this leds me to think that more specific selector have precedence over less specific ones?
yes there is, there are several rules ( applied in this order ) : inline css ( html style attribute ) overrides css rules in style tag and css file. a more specific selector takes precedence over a less specific one. rules that appear later in the code override earlier rules if both have the same specificity.
input[type=text], input[type=password], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #808080;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #A9A9A9;
}
html,body {
height:100%;
width:100%;
margin:0;
}
body {
display:flex;
background-color:#D3D3D3;
}
form {
margin:auto;
}
The above CSS code makes the form center aligned in Chrome and Firefox, but the same doesn't work in Internet Explorer. In IE, the form is center aligned horizontally, but not vertically. What is wrong and what can be done to make it align properly in IE as well?
The above problem is because IE has only partial support for flex.
Including align-items: center; after display: flex;
made the css get properly applied in IE.
Thanks to Rachel Gallen for pointing it out to me that the problem was with flex support in IE.
Reference: https://stackoverflow.com/a/17156937/5293838
Solution provided by cimmanon:
You need to read the notes very closely on caniuse. "Partial support"
refers to supporting one of two older drafts, and they don't make a
note of which browser supports which draft. IE10 supports the March
2012 draft, and it's the only one that's known to do so.
http://codepen.io/cimmanon/pen/ApHEy
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
/* fix for old FF */
width: 100%;
}
I have a container with several elements inside. I want to center these elements vertically, as a group. Can this be done with flexbox and if so, how?
Here is a demo:
.container {
margin: 0 auto;
width: 700px;
height: 600px;
background: #ebebeb;
flex-direction: column;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.btn {
display: inline-block;
padding: 5px 10px;
padding: 0.3125rem 0.625rem;
background: #129c87;
color: #fff;
border: 1px solid #999;
border-radius: 2px;
font-weight: 600;
text-align: center;
outline: none;
border: none;
cursor: pointer;
font-family: Arial;
}
<div class="container">
<h1>Center me and my paragraphs plz</h1>
<p>First paragraph is always first</p>
<p>Then comes the second</p>
<a class="btn" href="#">Read more</a>
</div>
You just need justify-content:center;
fiddle: https://jsfiddle.net/w64ks4x7/
.container {
margin: 0 auto;
width: 700px;
height: 600px;
background: #ebebeb;
flex-direction: column;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
justify-content:center;
}
I am using flex box and want to align button to the bottom.
I am using position absolute and bottom: 0, but browser is ignoring it.
<ul class="box">
<li><div>this has <br> more <br> <button>one</button></div></li>
<li><div>this has <br> more <br> content <br> <button>one</button></div></li>
<li>d<div><button>one</button></div></li>
</ul>
ul {
/* basic styling */
width: 100%;
height: 100px;
border: 1px solid #555;
/* flexbox setup */
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
}
.box > li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
margin: 0 1px;
padding-bottom: 20px;
border-bottom: 20px solid red;
position: relative;
}
button {
position: absolute;
bottom: 0;
}
/* our colors */
.box > li:nth-child(1){ background : #FCC; }
.box > li:nth-child(2){ background : #CFC; }
.box > li:nth-child(3){ background : #CCF; }
I can use float and not use flex-box, but I want to see if there is a solution for this using flex-box.
demo here:
http://jsfiddle.net/NJAAa/
Working WebKit version: http://jsfiddle.net/LLtmE/
In short: you need to put your text context in a separate div; make each li a flexbox and set box-orient to vertical. And remove all that absolute/relative positioning - it's no longer necessary.
The reason is the flex container has no specific width or height,since its flexible with its contents.
To ensure my statement, try with left or top, it will react for your data. If you try with right or bottom, you cant see the reaction. Since the flex container box original width / height is very less.
Check this on codepen. I hope this help and that is not late:)
ul {
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 80%;
margin: 10% auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #b2b2b2;
box-shadow: 2px 2px 3px #666666;
}
ul > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
ul > li > button {
margin: 20px;
padding: 5px 15px;
cursor: pointer;
}
ul > li > button:hover {
color: whitesmoke;
background-color: maroon;
}
/* our colors */
ul > li:nth-child(1) {
background: #000000;
}
ul > li:nth-child(2) {
background: #191919;
}
ul > li:nth-child(3) {
background: #323232;
}
And this can be helpfull....