Is it possible to center captions on flexbox elements? I've only been able to center when I have the captions contribute to the parent's width, but that messes up the distance between the flexbox elements.
This is what I'm trying to achieve:
flexbox with variable captions
Just found out how to do what I needed.
You can center captions with the following:
.caption-text {
display: flex;
justify-content: center;
white-space: nowrap;
}
Related
I have a container that adds a vertical scrollbar and i don't know how to fix it
.albums {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 10px;
flex-wrap: wrap;
overflow: auto;
}
I tried to align vertically the items inside of the container so i added min-height, but now i have a vertical scrollbar in my website.
the contents of your albums object are overflowing it's area. By setting overflow to auto, a scrollbar is shown, when the content gets bigger in any direction.
I think you want to use this:
overflow-x: auto;
overflow-y: hidden;
Or set overflow property to hidden, if you don't want to have any scrollbars at all. More information on overflow property here: https://www.w3schools.com/cssref/pr_pos_overflow.php
But be aware of the possibility of invisible content flowing outside of albums box.
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%;
}
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.
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.
I have a flexbox with a single item. This item is horizontally and vertically centered. When the item grows taller than its container it overflows equally at the top and the bottom of the container. I would like it to only overflow at the bottom, and remain anchored at the top. Any ideas?
http://codepen.io/wilsonpage/pen/LzryK (view in Chrome Canary for latest Flexbox)
Under the standard Flexbox draft, a single flex item can be vertically and horizontally centered by using margin: auto. You'll want to use this instead of the align-items property:
http://codepen.io/cimmanon/pen/EJdvn
section {
display: flex;
justify-content: center; /* you can remove this here, but its not hurting anything */
/* remove align-items */
height: 80%;
margin: 5% 0;
background: green;
}
div {
margin: auto; /* add */
}
Try setting the following on the flex item:
align-self: flex-start;