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%;
}
Related
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;
}
I have a grid of product tiles I'm displaying with flex to be equal height based on this codepen: https://codepen.io/imohkay/pen/gpard
They are 3-wide. However, on the last "row" when there is only 2 tiles left, the last tile gets pushed to the right as if there were 3 tiles. I can't figure out the right css setting to make it be in the second column.
Screenshot: https://pasteboard.co/Hk699jP.png
#products {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: stretch;
}
.product {
width: 33.3%;
}
They're pushed from each-other because you're using the space-between option on the justify-content property.
Either change space-between to flex-start or switch the display to a grid layout.
Fiddle (flex-box https://jsfiddle.net/swordys/db7dzkcx)
Fiddle (grid https://jsfiddle.net/swordys/65cyr3tu/)
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
I am trying to align the icons under the Share This Course icon horizontally, it works in the sidebar but not my content. Any advice?
Example here
http://www.themarketinggroup.ca/canscribe/courses/medical-transcription-healthcare-documentation-course/
The icons in the sidebar are floated to the left.
One solution would be to add a rule of float: left to the .widget li selector, like so:
.widget li { float: left; }
You could then add the desired amount of spacing between each icon with padding or margin rules.
You could also use flexbox. What you would do in that case is make the ul with a class of socials display: flex and add the additional rule of justify-content to give the icons some horizontal spacing. Something like this:
ul.socials { display: flex; justify-content: space-around; }
I like the latter solution because it takes care of spacing the icons for you.
The possible ways to achieve this one is by using float
.display_inline li {
float: left; // inline elements in left
margin: 10px; //to create some space between the icons
}
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.