This question already has answers here:
What's the difference between align-content and align-items?
(15 answers)
Closed 2 years ago.
Please consider the following example:
https://jsfiddle.net/mr4fapx7/1/
<div class="z">
<div class="z1">1</div>
<div class="z1">2</div>
<div class="z1">3</div>
</div>
.z {
display: flex;
align-items: flex-start;
/* flex-direction: column; */
flex-wrap: wrap;
height: 1000px;
background: #900;
}
.z1 {
min-width: 51%;
background: #0f0;
}
I can't understand this behavior of flex... why does z1 els aren't aligned one after another as if you apply flex-direction: column to it? What is the logic behind it and is there a good way of making it "automatically" switch as if it where flex-direction: column as in this example?
UPDATE:
seems like I didn't explain myself correctly. Please try the above example with uncommented flex-direction property and see the desired behavior
The reason is because the flex parent has a height of 1000px, the space between the elements is equally distributed.
If you want the items to come one item after another, you have to set align-content : start to your flex parent and you should be good.
I am assuming that you set the min-width to 51% just to test things out and not something else.
Here's updated fiddle: https://jsfiddle.net/81nrf6ug/
Have you tried with a lower min-width value or removing the min-width property. The min width is 51% and if you want all the three columns in same row, the total would be 153% and total width should not be more than 100%.
Related
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 5 years ago.
I am creating a quiz game for my website. It sometimes happens that the content of the answers is different in length, which means that the divs containing the content have different height.
I want them to have the same height. They must somehow get the height of the div with the most content
Here is a Fiddle with the problem.
The live site is https://www.path-of-exile-builds.com/quiz
The problem:
I tried using
display: flex;
But it never worked. Right now I have no ideas.
I will probably try to play around with JS and set the elements height on displaying the next question, but I feel like there should be an easier solution with CSS.
Yes, flexbox is the way, but you have to set it properly. This few lines of code did the magic:
.quiz-container {
display: flex;
flex-flow: row wrap;
}
.quiz-container .question {
flex: 1 0 100%;
}
.quiz-container .helper {
flex: 0 0 50%;
}
.quiz-container .helper .possible-answers {
height: 100%;
}
Try live version here: https://jsfiddle.net/xpdxyaz6/79/
I'm fairly new to flexbox, and can't figure out how to do what I'm trying. I'd like for the repeated content to stack horizontally to the right. I would like the items to shrink to fit the width of the content (if the title/report id text is longer/shorter). I'm trying to make the red box only as wide as the content and stack to the right. The purple box(container) is flex. It seems like the red div is the culprit that I can't figure out. I've tried converting to inline-block and played with the flex-grow and flex-shrink, but nothing seems to work for me. There might be a style somewhere else in the project that is competing, but not sure what to look for if that's the case...
Styles of the purple container div:
line-height: 1.5;
display: flex;
flex-direction: column;
max-height: 22.8125rem;
padding-bottom: .5rem;
margin-bottom: 1rem;
background-color: #394b54;
flex-basis: 100%;
-webkit-box-flex: 1;
flex-grow: 1;
I'd like for the repeated content to stack horizontally to the right
Use the default flex-direction: row.
I would like the items to shrink to fit the width of the content
Use the default flex-grow: 0 and flex-basis: content.
I have a section of my website that I am using the CSS below on 2 divs, and one a tag in order to have the content vertically aligned in the center.
The problem is that with the flex style properties, when the window is < 768px ideally the content would change layout and each col-md-4 would stack on top of one another.
This is not happening, instead the columns just become really skinny and are displayed still side by side. Is there any way to fix this? Preferably trying to stay away from table-cell formatting
.about-us-nav {
display: flex;
align-items: center;
justify-content: center;
}
.about-us-nav a {
font-size: 20px;
color: #52361D;
background-color: #885A31;
border-color: #52361D;
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.how-help-container {
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
position:absolute;
z-index: 2;
}
There are two things you should consider:
When you apply display: flex to an element it becomes a flex container which comes with several default styles.
One of the defaults is flex-direction: row, which aligns flex items (child elements) along the horizontal axis. To switch to a vertical direction you need to specify flex-direction: column.
Another default is flex-wrap: nowrap, which forces flex items to remain on a single line (even if they overflow the container).
From your question:
The problem is that with the flex style properties, when the window
is <768px ideally the content would change layout and each col-md-4
would stack on top of one another. This is not happening, instead the
columns just become really skinny and are displayed still side by
side.
It sounds like the flex items are not wrapping. Try adding this to the flex container:
flex-wrap: wrap;
If you want the flex items to stack vertically when the window is < 768px, use a media query with the flex-direction property.
#media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
Note on browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
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
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 6 years ago.
HTML:
<div id="container">
<div class="item">Foo</div>
<div class="item">Bar</div>
</div>
CSS:
#container {
display: flex;
justify-content: center;
overflow: auto;
}
.item {
flex-grow: 1;
min-width: 200px;
max-width: 300px;
}
When the above container shrinks to less than 400px, a horizontal scroll bar appears as expected. However, the first item becomes partially obscured by the left edge of the container, even when scrolled all the way to the left. As the container shrinks, more of the item is obscured.
Demo: http://jsfiddle.net/FTKcQ/. Resize result frame to observe. Tested in Chrome 30 and Firefox 24.
If justify-content is changed from center to to any other value (e.g. space-between), then all content is visible by scrolling. Why do centered items behave differently?
The goal here is to have a row of centered items, each of which will grow in width between some range. If the container cannot fit all minimal-width items, it should scroll to display them all.
According to MDN (Flex item considerations), this behavior is expected for now:
Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge, as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well.
For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container.
So, you can achieve then expected result, using margins for alignment. Just add margin-left: auto for first item and margin-right:auto for last.
My demo: http://jsfiddle.net/WFxQk/
try with style sheet
#container {
background-color: green;
display: flex;
/* justify-content: center */ ;
align-items: center;
overflow: auto;
}
.item {
background-color: white;
border: 1px solid black;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
min-width: 200px;
max-width: 300px;
margin: auto;
}
I removed justify-content, making it to the default flex-start. And, added margin:auto which seems that it makes center alignment.
Updated Demo: http://jsfiddle.net/FTKcQ/1/