I am displaying verse: poetry and song lyrics.
I have one layout in which the lyrics flow as multi-column text. I have it working with flex layout, but it is not 100% to my satisfaction. See this codepen: https://codepen.io/sidewayss/pen/WNNEBgV
The remaining issue is the horizontal spacing of the columns. Flex layout spreads the columns as if I had set an alt version of align-items:space-between. I want the columns to align left, which can be accomplished only by setting the width of the container <div> to one pixel greater than the width at which it starts scrolling horizontally, the minimum width for displaying all the text.
It seems to me that there should be a way to do this with grid layout, but I have not been able to make it happen. I have tried a variety of settings, including the various auto flow settings.
Is there a solution for this in CSS, or do I have to rely on JavaScript? I have a way of doing it in JS, and I already have code that manipulates these elements, but I'd much rather do it in CSS. It seems like a supremely reasonable layout request, at least to me. The biggest problems I've encountered with grid layout are the need to set the number of rows and columns and to size those columns. I want that to be all automatic because otherwise I'm still writing JS code to set those values.
div {
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:300px;
overflow-x:scroll;
/* align block to start*/
align-content: flex-start;
}
span {
padding:0 8px;
/* align child block to start*/
align-self: flex-start;
}
Related
I really need your help here. I am very new to this Front End work and have submitted few questions related to this issue.
I am building an UI using react js. Where i display the cards for products and resources. I am using display flex in the container and making it center justified. But the issue is
I want to limit 4 cards per row
The width and hight of the cards to remain same irrespective of screen size
I have two sections where i display cards, at first place i am displaying 8 cards and the second place i am displaying two. I want the cards should start from same position in the UI
Alignment issue with header section
Here is the code and Demo: https://codesandbox.io/s/527rx9
Here is how it looks currently
I got some feedback from other questions i had pasted to use width to 1500px. But deep down i feel , not a right way and will break in some screen. But in this case as well i see alignment issues. below image by using 1500px in container width
Really need your help here to have a fix around it. If you are willing please paste the codesandbox or anyother link with a working code.
Regarding your container css for the grid:
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/* width: 1500px; */
}
It's no problem setting a max-width and you should do it, however dont use a specific width, instead set the max-width to 1500px if that's your desired max-width
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1500px;
}
However i would recommend putting all the content below your banner inside of a div
<div class="content-container">
And setting the CSS of that one to the max-width in order to avoid some indentation problems to solve this specific problem
I have a <div> called .PhotoBox which I am using as a flex container:
.PhotoBox{
display:flex;
flex-wrap: wrap;
}
This is within a React app which then renders a set of images to create a collage. This is the only CSS applied to the children:
img {
height:200px;
width:120px;
}
Currently by default, the flex box renders 7 items (images) horizontally before wrapping to a new row.
I want the user to be able to select how many items per row they want. The images are always 120px wide, so I was going to resize the flexbox to force this.
However when I do this to .PhotoBox, the flex container:
width:90%;
...the flex box now only renders one item (image) per row? When I've only marginally reduced the width? I expected after some trial and error / marginal reduction that I would find the point at which only 6 images per row are rendered, then 5, then 4 etc... but it went straight to one and essentially became a column display?
Should I be using a different method to reduce the width of the flex container a little so that fewer items render horizontally by default?
By styling .PhotoBox as
min-width: 90%;
max-width: 90%;
You can set a fixed width of 90% to the container.
I have a problem that I have spent many hours on and could not find a solution in any way. I will link the code in CodePen. It is just a subset of my layout. This is the reason for some of the root element's styling.
I basically have a layout where the page/screen/window should not have a scroll, but the inner body of the table widget should, when there are enough elements that go beyond the expected area of the table.
Basically I have a top content on the page, and a table widget. The table widget is to take up the rest of the space of the screen. The table has a title and a header. The body is to take up the rest of the table space and to have a scroll when it has elements that go beyond that space.
I have searched many resources over stack-overflow and tried many things. I will provide the current state of the layout in the pen. Here you can see all that I think is my best try.
https://codepen.io/anon/pen/KLogbJ
The central area of interest is the .body element. Based on things I've read I have styled it:
.body {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
padding: 0.5rem;
min-height: 0;
}
I would appreciate any help on this.
You could add overflow: scroll; to .body and give the .item a min-height
Also give your .table a max-height: 100%;
See this fiddle
The problem is that the contents of the area you want to scroll is set to scale to fit it's container. For the internal scroll you are looking for you would need to have:
A set height for the container so it won't expand to fit the content (in this case you want it to be 100% of the screen)
The content must not scale in height to fit it's container. It has to maintain it's height so that it remain larger than it's container.
If you have those 2 conditions you should find the scroll bars appear.
I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
I would like to create a grid with 4 columns. Columns width should fit to there respective contents, and gutters should all share the same width changing depending on the columns width. The tricky thing is that the total width of the container / grid should be adjustable dynamically, as it should be a responsive design.
Here is a scheme that's explains what i want to achieve :
And here is a fiddle trying with margin-left:auto (doesn't work)
nav ul {
width:80%; /* fluid design */
}
nav ul li {
display:inline-block;
}
nav ul li:not(:first-child) {
margin-left:auto;
}
I can use latest CSS3, Sass, Compass and Susy. But i haven't found any way to do it yet. It seems Susy doesn't allow me to have columns adjusting their width to their content - or i haven't found how. Does anyone have any idea ? thanks !
As in the link I posted as a comment, you may use flexboxes to achieve your layout.
Basically if you give your container this CSS:
.flexbox-container {
display: flex;
justify-content: space-between;
}
your content will adapt to the 100% of the container and space between elements will always be the same.
Here you have a FIDDLE as an example. Try writting more on any div to see it growing.
I've added a margin right to the elements so there's always a gap between elements. If you remove that margin, when no room the space between elements will be 0.
There's more options avalaibles like giving your elements the option to shrink if no room enough with flex-shrink: and many others...
More info about flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
At this point in time the only way to achieve this is through Javascript. CSS is not capable of finding the width based on your content.