I have an array of objects I'm mapping over to make a grid of time blocks. Each block represents 10 minutes so 12:00 - 12:10, 12:10 - 12:20, etc...
Right now I'm using a grid to make the blocks go horizontally across the screen and wrap back down.
const GridLayout = styled.div`
display: grid;
grid-template-columns: repeat(6, 2fr);
justify-content: center;
grid-gap: 0;
margin: 0 auto;
width: 16rem;
`;
I want to get it so my blocks are laid out vertically with 12:00am in the bottom left corner and the times moving in an upwards direction like so:
I can do this by adding a -webkit-transform: rotate(270deg); to the GridLayout however I prefer to achieve this without having to rotate the entire grid if I can. Is there a way to use the css-grid rows/columns to achieve this view?
I achieved this by removing the display: grid and instead making the div display: flex.
My final styled component looks like this:
const Wrapper = FlexColumn.extend`
flex-wrap: wrap;
flex-flow: column wrap;
align-content: stretch;
max-height: 13rem;
width: 48rem;
align-items: flex-start;
justify-content: center;
`;
Related
I'm trying to wrap a row of 4 elements on to 2 rows, see screenshot, but I want them to also be responsive when the screen is pinched or the resolution is different, I can't figure it out. see code.
.cats {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 25px;
}
.cat {
width: 49%;
position: relative;
}
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 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;
https://exchagerates.herokuapp.com/
If you look at the Guam flag in Chrome it is cut off from the top. It gets distributed between the first column and the second. Which is what I don't want. How do I get the tops of all columns to align? I have tried using page-break-inside: avoid but that doesn't seem to help.
Can someone help?
You were close, just add a webkit prefix:
-webkit-column-break-inside: avoid;
Required for my Chrome at least, Windows, version 77.0.3865.120 (Official Build) (64-bit).
Use align-items: center; or align-items: flex-end; on all flex items
OR
Change the structure Flexbox
For the container you've decided to create a CSS columns layout. This doesn't have much effect in generating height for the children. Quite the opposite.
Referrring to a Bootstrap card-deck layout, you'll need the following CSS on the container:
/*columns: 300px 4;*/
/* margin: 20vh 5% 5%; */
margin-top: calc(50px + 4%); // 50px height of the input + 2% top margin + 2% bottom margin
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-flow: row wrap;
In this case the children will be aligned as flex items. For a column layout you'll need the flex-basis property.
display: flex;
flex: 1 0 30%; // flex-basis 30% for 3 colums per row (33.33% - 15px - 15px)
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;