I have different outer-divs with the same dynamically content. Each outer-div consists of a header (h1), one or more div's or p's and a button. Because of the dynamically content, the height of each element inside the outer-div is not known.
What I want: the elements (h1, div, p, a) inside the outer-div have all a equal height, correspondenting to the biggest element.
So if h1 in the second outer-div has a height of 45px, all the h1-element of the other outer-div's must have a height of 45px. If the div in the third outer-div has a height of 112px, all the divs in the other outer-divs must have a height of 112px. Etc.
Is it possible to apply that to the elements inside the outer-div via css? I know it's possible with jQuery, I prefer css.
Preferably with an example, just 'flex' doesn't seem te work :-(
No, it does not work out that way.
you can try this:
external div's make the same height through display: flex;
inside 3 blocks
.items {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 33%;
display: flex;
flex-wrap: wrap
}
https://codepen.io/anon/pen/KQyBLm
Related
I'm trying to find a way to have a div expand down to the footer even when its content isn't big enough, preferable with CSS but a React solution is welcome as well. It should scroll within itself without pushing down the footer, which is fixed at the bottom.
Currently I have the contentArea with the following CSS...
position: sticky;
overflow-y: scroll;
height: 60vh; //this shouldn't be set, should just expand down to its sibling container, the footer, at the bottom
The container's parent has the position:relative styling.
There are similar solutions on here but they all require setting 100vh on the body, or styling the body in some way, and I can't do that as this is a standalone React component. The component starts at the blue dropdown, the one with Step 1 of 5 in it
You can try:
.parentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.selectedContainer {
flex: 1;
}
I'm trying to make my personal website responsive. On the landing page (in desktop view) there are three links arranged in a flex box row. Each link itself is also a flexbox, with the items arranged in a column:
The CSS for this is as follows:
//Parent container:
.homemain-links {
display:flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10%;
}
//Link:
.info-container {
display:flex;
flex-direction: column;
align-items: center;
padding:10%;
width:100px;
height:100px;
box-sizing: border-box;
}
When the screen size shifts from desktop to mobile, I want the links to switch from a row to a column. However when this happens, the link contents spill out:
CSS:
#media (max-width:576px) {
.homemain-links{
display:flex;
flex-direction: column;
}
.info-container {
width:100px;
height:100px;
}
}
I've tried using width:auto height:auto which worked, but the div container switched from a square to a rectangle, and I'm wanting to retain the square shape.
So is there a way to 'merge' a flexbox with the items within in, so that the items stay within it's boundaries?
As far as I know, no, the reason they spill out of the div container is because you have set a fixed width/height. You can try to set it with a relative values that's equal in order to have it adapt to screen sizes as well as retain the square shape, i.e., 6.5rem for both width/height or other similar relative values in CSS.
I am trying to left align items in a flexbox like so. However i cannot get them to align like in a grid display, ive tried all the flexbox properties but can only get it to work using a grid, but i cannot use a grid here.
Here is the code i have:
CSS
.container {
display: flex;
align-items: center;
justify-content: space-between;
text-align:left;
}
I need all text to align left by the red line.
It is needed to fix the width of each items to align the position.
Try to add flex-basis css property to all child styles.
So if the above style is something like .list-item, then add this style to all childs like...
.list-item > div {
flex-basis: 25%;
}
See this fiddle.
I have a flex layout with flex-direction:column inside a container with height: 100vh. My flex layout container (the blue one) has to take the full height (height:100%) of the main container.
Given this context now I want to avoid flex elements overflow on the right when the viewport height is too small to contain all the elements.
So I want that all the viewport is blue and all my red elements inside the blue stay into a column.
I tried to set min-height:100vh , it works for letting have all my items in column but awkwardly my blue flex layout container no loger takes the full 100% height.
I can't change the html structure.
In .search-form {...} replace height: 100%; with min-height: 100%; so that it's allowed to grow larger than 100%.
Fiddle here
Given this context now I want to avoid flex elements overflow on the
right when the viewport height is too small to contain all the
elements.
So I want that all the viewport is blue and all my red elements inside
the blue stay into a column.
In the flex container (.flex-row) change flex-wrap: wrap to flex-wrap: nowrap.
.flex-row {
width: 100%;
display: flex;
/* flex-wrap: wrap; REMOVE */
flex-wrap: nowrap; /* NEW */
justify-content: space-around;
flex-direction: column;
align-items: center;
}
DEMO: http://jsfiddle.net/hxknmzfd/2/
flex-wrap
The CSS flex-wrap property specifies whether flex items are forced
into a single line or can be wrapped onto multiple lines.
Just discovered flex today and I'm hoping it'll solve a small visual challenge.
I have a list of items already alphabetically sorted. They all have the same width and, up until now, I've had them floating left. This results in a left-to-right order with wrapping when horizontal space runs out.
What I was hoping to do is have top-down sorting with as many columns as possible with the available width. Seeing as this list is dynamic, the height would be variable. And the height would have to increase as horizontal space is lost (resizing) preventing as many columns.
Given the apparent nature of what flex is trying to accomplish I'd think this would be supported, but thus far I can't figure it out. "display: flex" and "flex-flow: column wrap" seem correct, but it requires a specific height to work, which I can't provide.
Am I missing something?
Edit:
I've created a JSFiddle to play with here: https://jsfiddle.net/7ae3xz2x/
ul {
display: flex;
flex-flow: column wrap;
height: 100px;
}
ul li {
width: 150px;
list-style-type: none;
border: 1px solid black;
text-align: center;
}
If you take the height off the ul, nothing wraps.
It seems the conceptual problem is that "column" flow is all tied to the height of the container instead of to the width, which is what I want. I don't care how tall the area has to be. I care about having as many columns as possible in the available width. Maybe this is just an annoying shortcoming of the flex convention.
This seems like a job for CSS columns: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns
Instead of flex, give the ul a column-width CSS rule:
ul {
column-width: 150px;
}
Here's a JSFiddle.
I'm not sure if this is what you're looking for, but you might need to change flex-flow: column wrap: to flex-flow: row wrap; and change the height and width to 100vh and 100vw
ul {
display: flex;
flex-direction: column;
flex-flow: row wrap;
height: 100vh;
width: 100vw;
}
So now the list items keep the same width and adjust height based on the size of the view width. Updated Fiddle