I am working on a menu bar that has all of its buttons distributed evenly in the center of the nav element (the container). I need this layout to look good on most devices, regardless of its size. The problem is, at one of the tablet sizes I am testing, only one of the buttons goes to the next line, leaving an undesirable look. Is there any way using css to have all items distributed on all lines being used evenly?
Here is the nav's style block:
nav {
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: #000;
}
Related
Im trying to make a simple card grid layout but i get weird spacing on the right of the layout, what i want its that the content is always centered with the same margin in both sides of the layout.
My code: https://stackblitz.com/edit/angular-9-material-starter-ps6mp7?file=src%2Fapp%2Fapp.component.html
The area in purple is the weird spacing
Try adding justify-content: center; align-items: center; to your content2 class
.content2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
I've made a table-like flex structure, that looks pretty nice and has adaptive number of cells, but when last row isn't full - it stretches remaining cells to full size, which looks unshapely.
https://jsfiddle.net/zzmaster/6uw4gm3t/3/
(you need to enlarge results area to maximum in order to see this)
Logically, justify-content: flex-start; should fix this, but it doesn't.
Is there any way to turn remained cells back to their's place?
You can fix with remove flex: 1 1 0px CSS style. Replace below code with your current code.
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
}
change your css like below!
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
flex: 1 1 0px;
justify-content: center;
align-items: center;
resize: both;
}
I tried this to vertically center all items in a Jumbotron,
display: flex;
justify-content: center;
align-items: center;
But the issue is all items are lined up in a single line like they are displaying inline. How do you vertically center them while still displaying them in block.
Since block element stacks vertically, change the flex direction to column, and so will the flex items.
display: flex;
flex-direction: column; /* added */
justify-content: center;
align-items: center;
Adding to above answer, you can also center text elements such as h1, p or a by setting text-align to center.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* aligning items */
text-align: center; /* aligning text */
I´m trying to adapt the background image i have on my website but i cannot get it smaller on Iphones, Nexus or whatever small phone i'm testing it. I am using the Chrome developer tools to test this.
Here's a snippet on JsBin: http://jsbin.com/dacamemule/edit?output
The background image is 1920x1080 which would make it too big for small phones but i did tried to create a break point using media queries with the image size set at 768x432 but it still didn´t work. It's supposed to be an image map where the links in it will "stick" in the same place no matter if it's desktop or responsive view. The blue dot with the video is one example. There should be more dots spread throughout the map.
Thanks for your help.
If you want your image to be responsive, you might want to remove the min-width:1024px rule from img.bg. Perhaps replace it with min-width: 100%; max-width: 100%; height: auto;?
However, if you really want to use your image as background, don't use an <img> tag at all. Use the background properties of your <body> or of some helper (container) and make use of the background-size property (and the required prefixes).
Proof of concept:
body {
background:white url("http://s33.postimg.org/loiuxh5wf/Fundo.png") no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
min-height:100vh;
margin: 0;
padding:0;
overflow-x: hidden;
font-family: sans-serif;
}
.someLinks {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.someLinks>a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 45%;
-ms-flex: 1 0 45%;
flex: 1 0 45%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
color: red;
text-decoration: none;
}
.someLinks>a:hover {
background-color: rgba(255,0,0,.35);
color: white;
}
<div class="someLinks">
link
link
link
link
</div>
This is just an example. Replace the links with your actual links and remove their onlick property when you want them active.
As of now, your desired outcome is unclear and this might not fit your purpose. Please create a Minimal, Complete, and Verifiable example of your problem, properly linking all your resources. Right now, the contents of video.js, index.html and style.css are unknown to us. And so are the images you are overlaying.
change position "fixed" to "relative" on your image css.
I am trying to vertically align my login screen. Here is my code in JS Fiddle and used the css
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}
I am not getting my items vertically centered. Will i wont be able to achieve it since i use bootstrap class to horizontal center.
Bootstrap 4
Bootstrap 4 is flexbox by default, and there are flexbox utility classes for centering and alignment. The align-items-center class will work to vertically center rows and columns.
Bootstrap 3.x (orignal answer)
It will center both horizontally and vertically if you make the div and it's containers 100% height:
html,
body,
.fluid-container {
height: 100%;
}
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100%;
}
Demo
Another option (for modern browsers) is to set the full height using vh viewport unit:
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100vh;
}
Demo 2