I cant get this too work. Im using react and styled components and my justify/aligning isnt working.
div - set to flex, flex-direction is column
div - header div
div - body div, flex grow set to 1 so that the flexbox takes up the full height of the container
Now the flex item for the body takes up the full height (good) and im trying to center the content in the middle of this div. I have tried all combinations of align/justify on both the parent and body div but it doesnt work and im not sure why.
Heres my code
const Div = styled.div`
display: flex;
flex-direction: column;
min-height: 100vh;
justify-items: center;
& > * :nth-child(2){
flex-grow: 1;
background-color: red;
/* position:relative; */
/* align-self: center; */
}
`
const OuterWrapper = styled.div`
padding: 10vw 1.5rem;
overflow: hidden;
// this is the div that contains content that i want to center
Can anyone see why its not working?
On your wrapper:
display: flex;
justify-content: center;
align-items: center;
Related
I have to display some item card. Each card has min-width property. When my screen size change, card size also changed. Because of that, I am facing a problem. That is, the last item/items takes whole area. Is it possible to keep a minimum width for each card, though it is last item or not? Please help.
Problem:
Attempt:
Please find in codesandbox: https://codesandbox.io/s/multiple-items-arrange-926fx
It sounds like you also want to specify a max-width for your cards.
In your example it could simply be:
const Container = styled.div`
flex: 1;
margin: 5px;
max-width: 300px;
min-width: 280px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5fbfd;
position: relative;
&:hover ${Info} {
opacity: 1;
}
`;
You can of course also leave max-width: 280px if you don't wish to change the width of the elements at all.
Additionally you can add justify-content: flex-start to the container to make it look less weird on resizes. In your example:
const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
`;
Is it possible to make flex-wrap wrap after the last row overflows without vertical scroll like it is possible horizontally?
My CSS currently looks like this:
.flex-container {
height: calc(100% - 0.125rem);
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
overflow: hidden;
align-items: center;
}
.item {
width: 6.25rem;
height: 6.25rem;
margin: 1px 0 0 1px;
font-size: 2.25rem;
line-height: 6.25rem;
background-color: rgb(225, 225, 225);
}
My output looks like this (flex wraps and empty space below)
What I am trying to achieve looks like this
If I understand your question right, I think the challenge you have is with the height property of the .flex-container class.
height: calc(100% - 0.125rem) will leave an offset(gap) since the height of .item 6.25rem > 0.125rem.
For the height of .flex-container try height: calc(100% - 6.25rem) instead, or tweak the height property until you get your desired output.
Note that the flex-wrap property only specifies if the flex items should stay on one line or can wrap onto multiple lines, which you already have specified. And with the overflow property set to hidden, you should not have any challenges with scrolls.
I'm trying to align a property in css with :
display: flex;
justify-content: center;
align-items: center;
body has height :100%, and the described element is the first nested element in body, why it isn't receiving 100% height ?
codesandbox.io
Kindly add height: 100%; to the id root as you are working with react.
#root {
height: 100%;
}
Here is bootply: https://www.bootply.com/kmfYqoCCLf
there will be black border-top 1px solid in two rows, the problem is that the divs are not same height so they don't create a "one line". how I can make the divs with the border to be same height and centered to the middle same time?
I tried flexbox, but something went probably wrong. It works only if:
.line {
align-items: inherit;
}
but in this case, the content of divs is not in the middle.
Thanks for helping me out
Karolina
Finaly, found it myself:
.line {
align-items: inherit;
}
.line > div {
display: flex;
align-items: center;
justify-content: center;
}
Okay, this is difficult to explain. If you look at the sample I put up at http://granthoneymoon.com/temp3.html you can see 4 nav buttons to the right of the logo.
What I want is for the nav buttons to be evenly spread among the space to the right of the logo, and as the browser window gets smaller the buttons get closer together. But, at a certain point, once the browser gets so small that the buttons would overlap it would push the whole menu underneath the logo.
Right now I have the buttons inline to the right of the logo, but as the browser gets smaller it just pushes one button at a time to the next line instead of the buttons getting closer together.
Is there a way to do this?
scale the buttons reponsively: e.g.
img.button{
width:17%
height :auto;
}
Add this code to the bottom of you CSS Sheet
Using #CSS Media Tags it will change the #header ID to max-width of 627px when the screen reaches width: 1077px
//CSS
#media screen and (max-width: 1077px) {
#header{
max-width: 627px;
}
}
This is one of the problems Flexbox was created to solve.
Here is a good resource to get started:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The gotcha with Flexbox is that because it’s new browser support is somewhat limited. See which browsers can use it here:
http://caniuse.com/#search=flexbox
I added comments below to explain what each line is doing. Let me know if you have any questions!
/* on all elements, reset any browser
added default margin and padding */
* { margin:0; padding:0 }
body {
/* make it pretty */
font-family: 'Palatino', serif;
font-style: italic;
}
header {
/* set flex-parent, makes direct
children flex-children */
display: -webkit-flex;
display: flex;
/* direct childen of the header
should wrap */
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/* make it pretty */
background: darkblue;
}
header #logo {
/* as a flex child, grow and
shrink as needed, use base-width
of 200px */
-webkit-flex: 1 1 200px;
flex: 1 1 200px;
/* set logo height */
height: 70px;
/* make it pretty */
background: lightgrey;
/* make this element also a flex-parent */
display: -webkit-flex;
display: flex;
/* direct childen (in this case, the :before)
should be vertically centered inside of logo */
-webkit-align-items: center;
align-items: center;
/* direct childen (in this case, the :before)
should be horizontally centered inside of logo */
-webkit-justify-content: center;
justify-content: center;
}
header #logo:before {
/* add descriptive text to this box */
content: 'Logo';
}
header nav {
/* as a flex child, grow and shrink as needed,
use current width as base width */
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
/* change padding not to add to overall width */
box-sizing: border-box;
/* set left and right padding to 10% of
available space */
padding: 0 10%;
/* make this element also a flex-parent */
display: -webkit-flex;
display: flex;
/* direct childen (in this case, the links)
should be vertically centered inside of this element */
-webkit-align-items: center;
align-items: center;
/* direct childen (in this case, the links)
should be horizontally centered inside of this element */
-webkit-justify-content: space-around;
justify-content: space-around;
}
header nav a {
/* as a flex child, never ever grow and shrink,
use curremt width as base width */
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
/* change padding not to add to overall width */
box-sizing: border-box;
/* hard code width and height */
width: 50px;
height: 50px;
/* add 10px of margin to top, right, bottom, and left */
margin: 10px;
/* make it pretty */
background: linear-gradient(cyan, blue);
border-radius: 10%;
border: 1px solid lightgrey;
color: white;
text-decoration: none;
text-align: center;
/* make this element also a flex-parent */
display: -webkit-flex;
display: flex;
/* direct childen (in this case, the link text)
should be vertically centered inside of this element */
-webkit-align-items: center;
align-items: center;
}
<header>
<figure id="logo"></figure>
<nav>
Link One
Link Two
Link Three
Link Four
</nav>
</header>
Editable Demo: http://jsbin.com/zavawudaye/3