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.
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 creating a section in a website with three divs. I'm displaying the divs in one line with display flex and orientation row.
To make the design responsive, I want it to appear as a column as the screen size decreases. In the media query, I'm setting the container to flex-direction: column; but it's not working as intended. Two divs appear in a column, while the middle one is on the side. I have no idea why it is not working when in my last project I did the same thing and had no issues. Link to the code below so you can see what I wrote:
https://codepen.io/DanDiaz/pen/PopmOdq
.grid {
height: 95vh;
padding-top: 5vh;
display: flex;
flex-direction: column;
}
I think thats due to the 'flex-wrap: wrap' on class .grid!
If you remove this property, it works :) Just need to set the proper image height then.
I would like to display my clients first and last name in 2 different inputs in the center of the client page and give each input a minimum width to avoid extra spacing between the two.
I've tried to use min-width or use the "size" attribute for the inputs but it's causing problems when the first input has too much characters.
<div className="input-client-name">
<input value={this.state.fname}/>
<input value={this.state.lname}/>
</div>
.input-client-name {
display: flex;
}
.input-client-name input {
min-width: 0;
max-width: min-content;
}
I expect the output of: " firstName LastName " without worrying from the characters length of each of the ones.
If you're working with flexbox, it's advised to not play with width since we flexbox for achieving responsive behaviour and setting width (even max and min widths) to a value defeats that purpose.
Since you want input boxes displayed side-by-side, and based on window size - you may want to wrap second input box to next line - add a flex-flow to your parent.
.input-client-name {
display: flex;
flex-flow: row wrap;
}
flex-flow is a combination of flex-direction and flex-wrap properties.
Next, you want to give a min width to your input boxes, you can achieve this by using flex-basis - which works as an initial size for your element.
.input-client-name input {
flex-basis: 40%;
margin: 8px;
}
Note: margin is added as space between two input boxes. You can choose to use justify-content: space-between or justify-content: space-evenly for same purpose.
Additional references:
A demo fiddle for this is availale here.
Want to learn more about flexbox? Read a nice article on it here.
Hope this helps.
input {
text-align: center;
width: auto;
}
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
This question already has answers here:
Create a Masonry grid with flexbox (or other CSS)
(3 answers)
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 5 years ago.
Using flex
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.box {
width: 46%;
flex-grow: 1;
}
gets the next picture:
Using floating
.container {
overflow: hidden;
}
.box {
display: inline-block;
float: left;
}
gets me the next picture:
The task requires that there would be no vertical spaces between boxes (how it is in the first column with flexbox or in the second column with floating), so the boxes float to each other filling ALL available space.
Boxes widths are the same, but boxes heights differ.
Should be responsive, so the 2 columns get into one when viewport shrinks.
Appreciate any help or hints.
UPDATE: I would like to explain why the solution here (question for which is marked as duplicate) doesn't work form me – in that question, items are about the same, they are pretty much homogeneous, so they can be approximately calculated how much items goes into which column. In my example, items can be of very different sizes, so if 2 (for example) columns created, it is not clear hot to put html layout, how many divs goes into which column, so, for example, 'header 1' box can be the same height as 2-5 together – and their height is dynamic.
You can use column-width property (CSS columns), though you might have to check the browser support for that feature.
Here is the documentation.
Here is a fiddle for the same.