I'm trying to left align B and then right align C only if there is space, if there is not enough space, how do I make just position itself after B instead of right aligning? is this only doable with javascript or can I do it from CSS?
<div class='A'>
<div class='B'/>
<div class='C'/>
<div>
I actually have it working using javascript to apply css classes and update based on those, but I was wondering if it was possible without doing that.
You can use flexbox. By using justify-content:space-between; items takes space in between of them
.A{
display:flex;
justify-content:space-between;
}
<div class="A">
<div class="B">B</div>
<div class="C">C</div>
</div>
Try out display: flex
like this:
<div class=‚flex a‘>
<div class=‚b‘></div>
<div class=‚spacer‘></div>
<div class=‚c‘></div>
</div>
And use this CSS
.flex {
display: flex;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto
}
For more information how flex works look here
Yes you can use
flex-wrap: wrap;
remove display flex in your style
Related
How could i make sure my <p class="title"></p> and
<p class="subtitle"></p> are displayed underneath of eachother because right now they are being displayed next to eachother
You can make use of flexbox, it'll definitely solve your problem.
Example
If you want to arrange two items underlying with each other:
.container {
display: flex;
flex-direction: column;
}
<div class="container">
<p class="title">Hello</p>
<p class="subtitle">World</p>
</div>
If you want to arrange two items next to each other.
.container {
display: flex; /*by default it will align items in one row*/
}
<div class="container">
<p class="title">Hello</p>
<p class="subtitle">World</p>
</div>
How can I center a Spinner in the middle of the page?
<div class="content-area" *ngIf="!document">
<div class="spinner">Loading...</div>
</div>
I try several combination of everything css-class with center in it, but did not work for me.
You can use flexbox. Add a class to the content area that implements use of flexbox on its children and then center the item with justify-content and align-items.
Here is the markup I'm referring to:
<div class="content-container">
<div class="content-area centered-content-area">
<div class="spinner">Loading...</div>
</div>
</div>
Here is the css to center the spinner:
.centered-content-area {
display: flex;
justify-content: center;
align-items: center;
}
Here is a stackblitz to see it working:
https://stackblitz.com/edit/clarity-v3-light-theme-hhfttg
I'm using Bulma have a column of cards which need to have the same height regardless of the content.
To achieve so I have created the following class
.equal-height
display: flex
flex-direction: column
height: 100%
My HTML looks like
<div class='columns is-multiline'>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
</div>
Which produces something like
Now I'm trying to make the card-footer to stick at the bottom of the card like below.
I have tried a few things with flex but they don't really make sense.
Any ideas on how I may do it?
Add "flex: auto;" to '.card-contents' to make the card-footer to stick at the bottom of the card. Here is the working jsfiddle link.
.equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.equal-height .card-content {
flex: auto;
}
Add this CSS
.card-footer {
margin-top: auto;
}
working demo : https://jsfiddle.net/baLg7940/
I want to make my Bootstrap 3 columns to be:
of the same height (edit: equal to the highest column, which could change)
have visible gutters separating them
have a background color that matches their equal height
So far I was able to either make them of equal height (with no visible gutter) or give them a gutter and a background. I've been fiddling with this for the past 2 hours to no avail. Naturally, I've read through everything I could find but couldn't solve this riddle. Would highly appreciate your help!
Here is code and codepen with my problem.
HTML
<div class="container">
<div class="flex-row row">
<div class="col-sm-5">
<div class="inner">
<p>Some text and probably an image over here. Not as much as on the other side, but still..</p>
</div>
</div>
<div class="col-sm-7">
<div class="inner">
<p>More content on this side. How can I make the two columns have the same height and have a gutter in between?</p>
<img src="...">
</div>
</div>
</div>
</div>
CSS
div[class^='col-sm-'],
div[class*=' col-sm-'] {
background-color: green;
}
#media only screen and (min-width : 768px) {
.flex-row.row {
display: flex;
flex-wrap: wrap;
}
.flex-row.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
http://codepen.io/anon/pen/QEozAj
I don't want columns to be of fixed height because contents will change.
And ideally I would like to have as little extra divs as possible. :)
Edit: Column heights now look okay, thanks to a helpful reply. Still need the visible gutter.
I was wondering whether it is possible in CSS to fill a div with a (unknown) amount of divs. They should fill with each the same width.
In Android, this is known as "layout-weight". My question, is something like this available in CSS? Or do I have to use Javascript/jQuery for this?
Thanks in advance,
Bart
Here is a fiddle: http://jsfiddle.net/wjaedd9d/
CSS:
.parent {
display: flex;
flex-direction: row;
}
.parent .child {
flex: 1;
border: 1px solid;
}
HTML:
<div class="parent">
<div class="child">Some content</div>
<div class="child">Some content</div>
<div class="child">Some content</div>
</div>
Note: Try increasing the number of child divs.
You want to use
display: flexbox
flex-direction: row;
JSFiddle