I am trying to center the content of a flexbox vertically and horizontally but it doesn't seem to work:
Here is the CSS:
#about{
display: flex;
justify-content: center;
align-items: center;
}
.btn-about {
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
color: #2A77C8;
font-size: 1.8em;
background: #ffffff;
padding: 1em 3em;
text-decoration: none;
text-align: center;
}
and the HTML:
<div class="section" id="about">
<div class="element"></div>
<div class="btn-about">Wer bin ich?</div>
</div>
Thank you very much for your support!
Sorry! The mistake was mine. I am using fullPage.js and the flexbox centering does not work unless you initialize the function with the option:
verticalCentered: false
Use
html,body, .section{
width:100%;
height: 100%;
}
in addition to above css
Check https://jsfiddle.net/1Lgovkdr/1/
Related
I'm having my html-css practice day. Right now, the NAV-Bar-Menus are appearing on the upper left of the screen (vertically). I have tried checking CSS cheat sheet regarding display, flex, etc., google, and all but its still not working. Any help for a newbie would be appreciated :)
Here's the CSS:
<style>
.nav-bar {
display: flex;
align-items: center;
width: 100%;
padding: 10px;
font-family: Arial;
background-color: orangered;
color: white;
font-size: 20px;
text-decoration: none;
list-style: none;
margin: 0;
}
</style>
and here's the HTML:
<nav>
Home
Wordpress+
Web Design+
Graphic Design
Inspiration
Contact
About
</nav>
The element in the image is styled using absolute positioning but when I resize the screen I have to slightly adjust the positioning of both the 'For Sale' element and the '$400,000' element so I am curious as to if there is a way to achieve the same layout using flexbox?
Here is my attempt (https://codepen.io/ob98/pen/eYVPJLJ)
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
css:
.container{
display: flex;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1{
align-self: flex-start;
}
.item2{
align-self: flex-end;
justify-self: flex-end; /* If align-self moved this to the bottom of the container vertically, I am thinking that this should move it to the end/right side of the container horizontally, but that is not working */
}
Just went to https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self and saw that "In flexbox layouts, this property is ignored (more about alignment in Flexbox)", so I guess that explains why that is not working but I don't really understand why this property is being ignored... Anyway, is there a way to achieve this layout using flexbox or do I have to stick to absolute positioning? Thanks for any input.
Add to .container the declaration justify-content: space-between, to make both your p go to the container edges, and that's done!
.container {
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: flex-end;
justify-self: flex-end;
}
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
Adding justify-content to container and just using the item2 class like this would help.
.container{
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item2{
align-self: flex-end;
}
Can be the answer but im not sure. When i ran it worked.
.bg-flex {
width: 100vw;
height: 100vh;
background-image: url('https://media.istockphoto.com/photos/the-city-of-london-skyline-at-night-united-kingdom-picture-id1312550959');
display: flex;
flex-direction: column;
}
.for-sale {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.k-400 {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
.example {
width: 300px;
height: 100px;
background-color: aqua;
}
<div class="bg-flex">
<div class="for-sale">
<div class="example">
</div>
</div>
<div class="k-400">
<div class="example">
</div>
</div>
</div>
Please run my code sample and hover over the black square, why does the inner div, the white border div, oscillate/shake? How do I make it stop doing that?
body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4px solid white;
width: 60px;
height: 60px;
}
<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>
Goal
On hover of my outer div (<div class="transition-container">), I want it to grow and I want to use a transition to make it smooth
I don't want the growing div to take up any more space. Currently, to achieve this, I shrink the margins
Adding transition-timing-function: steps(10, end); fixed my contrived example. Source.
body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
transition-timing-function: steps(10, end);
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4px solid white;
width: 60px;
height: 60px;
}
<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>
Changing the border width from 4px to 4.5px on <div class="inner-container"> fixed it. Changing it to any decimal seems to fix it. For instance if I use 5.5px or 3.5px that fixes it too. I don't understand why though 🤷♂️, would love to know why!
I had to use this fix in our application as the transition-time-function fixed didn't work in our more complicated layout.
body {
min-height: 100vh;
display: flex;
}
.main-container {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.transition-container {
background: black;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
transition-duration: 1.25s;
transition-property: margin, width, height;
}
.transition-container:hover {
margin: 0;
width: 120px;
height: 120px;
}
.inner-container {
border: 4.5px solid white;
width: 60px;
height: 60px;
}
<div class="main-container">
<div class="transition-container">
<div class="inner-container">
</div>
</div>
</div>
On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}
Thanks in advance for helping me! :)
Add width: 100%; to your #navigation for a full-wdith centered menu.
Or change the display to block for a centered menu without a full-width background.
If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.
margin-bottom: 1px
Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/
Switch display: inline-block; to display: block;
I guess you need to understand something about block and inline-block elements.
Block elements , if sized and smaller than page/container can basicly; be centered with margin:auto;.
Inline-block element behaves like text and can follow text-align value.
To center your menu , you have then 2 options:
margin:auto; with a block formating, you need then just to remove your inline-block display wich does:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
}
or
text-align:center; from its parent if as an inline boxe. Wich would be here :
.bg-wrapper {
text-align:center;
}
If inline-block was here used to trigger some special layout , like to hold floatting elements, you could here turn display:block into display:table;.
doei
I am trying to mimic the WinJS grouped list view using flexbox. I am getting close (I think) except that the columns overlap when resizing.
http://jsfiddle.net/w8ts4Lnx/5/
I want the items to stay inside the group and let the group grow horizontally.
body {
height: 100%;
display: flex;
flex-flow: column wrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
width: 200px;
}
Any ideas what I'm missing?
If you don't want your content to overflow the container you must specify flex-shrink: 0;
flex-shrink source
This 'number' component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. The flex shrink factor is multiplied by the flex basis when distributing negative space.
Im not sure what winJS behavior you're trying to mimic since i've never used winJS, however I think this is closer to the proper behavior you're looking to achieve: http://jsfiddle.net/w8ts4Lnx/11/
The columns overlap because the contents doesn't fit. The Items don't fit in the group, so they flow-over.
To solve this you have to specify an overflow-strategy for the group-div, with "overflow" like this (the last one):
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
overflow: hidden;
}
The default is visible which make them fall outside. Read more here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
There are other options than hidden. You can set vertical/horizontal scroll, or both. Just choose whatever gets you closer to that desired "WinJS grouped list view". Try:
overflow-x: scroll;
overflow-y: auto;
or
overflow-y: auto;
overflow-x: scroll;
Happy coding!
I faced a similar issue and in my case the fix was removing the height setting on the container styling. This allowed the container size to grow with the changing browser heights.
"let the group grow horizontally"- You have to use the flex-direction as "row" on the .group, and you have to wrap the groups inside the #content, then it won't overlap anymore..
http://jsfiddle.net/gafcvq9b/2/
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row wrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: row wrap;
max-height: 600px;
}
I think it would be best not to set width since you want flexbox to dynamically determine it. so I removed it and then I added flex grow to increase the first group.
http://jsfiddle.net/mspriyakk/vv3tfrtv/3/
#content > .group:nth-of-type(1) {
flex-grow: 2;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
}
This is the correct answer that's fixes overlapping columns:
.flex-container {
display: flex;
flex-flow: column;
}
.flex-item {
flex: 1 0 auto;
}
It might be a little late, but I made a codepen, where I was working with this problem, maybe it will help to the people reading this question.
html
<body>
<div class="test-container">
<div class="item item1">
item1
</div>
<div class="item item2">
item2
</div>
<div class="item item3">
item3
</div>
</div>
</body>
css (scss)
.test-container {
display: flex;
justify-content: space-between;
height: 100%;
width: 50%;
background-color: red;
padding-left: 2rem;
.item {
opacity: 0.6;
height: 100px;
width: 100px;
flex-basis: 100px;
margin-left: -2rem;
}
.item1 {
background-color: cyan;
z-index: 10;
}
.item2 {
background-color: blue;
color: red;
z-index: 20;
}
.item3 {
background-color: black;
z-index: 30;
color: white;
}
}
https://codepen.io/Garma/pen/ZZmNWg?editors=1100
Cheers