I have a div that is 250 x 250 px.
I have 6 images I want inside; 2 columns, 3 images in each column.
The images will be two sizes: 80px wide, or 110px wide... but the heights vary.
Is it possible to achieve something like this; where the padding will adjust fluidly between the different image sizes to fill the div? I would like to avoid having more than two image classes; just one for 80 and one for 110.
Use flex box : http://css-tricks.com/snippets/css/a-guide-to-flexbox/ with that code :
flex-direction: column;
align-content: space-around; //or space-between;
Related
Suppose you have a <div> with the following CSS:
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 300px;
Notice that there is a fixed height. But suppose any child <div>s have a height of only 50px.
When these children wrap, the rows are evenly distributed vertically to fill the fixed height of the parent. This can be seen here. In that example, the two rows that result from wrapping each gain an equal space under them, such that each row and its space takes up half of the parent's height. But if there are more rows, the height will be redistributed evenly, such that they each take up (1/n_rows)%. Of course, a picture is worth 103 words...
Goal: Be able to fix the amount of space between rows. (As I dynamically add items I want the rows to fill in bit by bit without each new row causing the others to shift upwards.)
I haven't found a way to do this. It's not related to item height, margin, or padding, or to the flex gap. References on flex-wrap do not seem to mention this space and I have had no luck with Google. Of course I could just remove the parent's fixed height, but I'd rather not, because then items under the parent will shift as it grows instead.
If I understand your question correctly, you're looking for align-content: flex-start.
I am trying to create a game level select map where I need different sprites from a spritesheet placed on a very specific tile in a grid. I use CSS grid for this and place the tiles on the grid inline with grid-row-start and grid-column-start. Everything works as it should, except for one thing: the tiles have a small gap between them, but gapis set to 0 in the CSS. That small gap is enough to look really jarring (screenshot of map with the gap).
Because this is a mobile game, it is important that the grid is responsive and works on all device sizes. I am therefore working in percentages, and vw in the CSS. I am thinking that the gaps might be caused by decimal rounding errors?
The parent div:
.tilemap {
display: grid;
height: 150vw; /* 15 rows, 10 columns */
grid-template-rows: repeat(15, 1fr); /* 15 rows */
grid-template-columns: repeat(10, 1fr); /* 10 columns */
gap: 0;
place-content: stretch end;
}
The grid is full width (100vw) and each tile is 10vw = 10 columns. The height of the tilemap is 150vw = 15 rows. Each tile is squared (screnshot of CSS grid in devtools).
Common class for all tiles:
.tilemap div {
max-width: 100%;
background-size: 100%;
background-image: url("../images/responsive-spritesheet.png");
}
And each tile has a different background position. Included for completeness:
.tilemap div.road.vertical {
background-position: 0 100%;
}
The problem is not the spritesheet image, because the gaps still appear when I comment this out and replace it with background-color instead (screenshot).
Any help is greatly appreciated.
I know this question was asked forever ago, but I solved a similar issue of my own by dropping fr units, and using exact lengths for my grid cells.
This might help you, because I see you're using repeat() and thus have equal spacing in your grid, like I do.
I need to do suitable css for: creating a boxes that can be splitted to one or more columns depend on the screen size. (for example: if I have 7 boxes it can appear in big screen in 7 columns and 1 row, or it can appear in smaller screen in 2 rows and 4 columns, and etc.
Now I am doing in the div container:
display: flex;
flex-wrap: wrap;
overflow-y: auto;
overflow-x: hidden;
and in the box class:
height: 166px;
width: 320px;
I want that if I have a small screen and I have enough place to only one column, for example: if the div parent have 600 px width, I will have just one column of boxes but a lot of extra space, I will want that the boxes will shrink in that case to width 250px (minimum width), and that I will have 2 columns..
I want to use flex-shrink only when I have one column that created from the display flex.
How can I do it? (I want it to work in all browsers, that is why I didn't use grid)
Thanks
I am trying to replicate the behavior of tables using flexbox, for greater predictability and control. Here's a codepen of what I have currently.
Here's the SCSS:
.flex-table
display: flex
flex-direction: column
flex-wrap: nowrap
.flex-table-row
display: flex
flex-direction: row
flex-wrap: nowrap
.flex-table-item
flex-basis: 0
flex-grow: 1
.flex-table-item > :nth-child(3n + 3)
border: 1px solid red
flex-grow: 0
white-space: nowrap
My question is, how can I get the width of the each element in a column to take up the width of its content or the width of the largest element in the column, whichever is greater?
Here's an image of what I have:
I would like the box of Header 3 to equal the width of the other two elements. Also, if Content 2-2 or Content 3-2, grows, I want all columns to expand to have an equal width of the largest column, similar a table. I know I can partially do this with min-width, but I want an approach which works with dynamic content of any width.
At the end of the day, to do this (with flexboxes) the header and the content below will need to be grouped in columns instead of the way you have it now in which all headers are in the same row. I believe the way I mention makes more sense anyways, but maybe you need something different.
Here is a JSFiddle of what I am describing. As you can see, in each column each element will dynamically resize to the width of the largest element in that column. In addition, the flex-basis: 0 makes sure that every column resizes to the same width as the largest column. If the width of one column resizes, they all do.
Really all I did is switch from row to column:
.flex-table-column {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
Let me know if you have questions on this or if I missed the mark.
At the bottom of my web site at http://clearwaterfloridabeachrentals2.imbookingsecure.com/ there is a nav menu and three boxes with images. They are not centered instead they are left aligned. What CSS code can I use to center it?
This is the CSS I have:
.row-fluid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.textwidget {
text-align: center
}
Adding the .textwidget css fixed the three boxes but the menu is still left aligned. Not sure what code directly affects it.
use text-align: center on the element
Use text-align: center for the div wrapping the three images.
And make the table width="100%" for the nav menu
Flexbox only works one level deep:
flexible container and flexed child. So you need to make the menu a flex container too and then justify-content: center the child elements
Add flex: 1 to the child elements when you need them spaced evenly.
But this may not work well in your design as it is rather nested.
Essentially your footer is a column of two flexible rows
menu (row of 8 flexed columns which need to be centered on the row)
copyright (row of 2 flexed columns which seem to need space-between)
React on this first so I can help you further with restructuring