I can't get stuff to left and and right align on card headers via CSS. In my card header I want the the md-icon delete_forever to the right. I tried flex but did not work.
<div class="flex-container">
<div *ngFor="let item of items | async" class="flex-items-default">
<md-card (click)="test()" style="width:300px;height:250px">
<md-card-header>
<md-card-title>
<span>{{ item.name }}</span>
<span class="flex2"></span>
<span>
<button md-icon-button (click)="onDelete()">
<md-icon>delete_forever</md-icon>
</button>
</span>
</md-card-title>
<md-card-subtitle></md-card-subtitle>
</md-card-header>
<md-card-content>
{{ item.description }}
</md-card-content>
</md-card>
</div>
</div>
.flex-container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.flex2 {
flex: 1 1 auto;
}
Using Flex can be a solution, but you need to understand how to use flex properties. According to this website (and to some empirical personal experience), attritutes align-items and self-align modify disposition on cross-axis which is, in your case, column as long as you defined flex-direction: row.
TL;DR : Change flex-direction: row to flex-direction: column and then css self-align / align-items will allow you to align on horizontal axis. In your case, self-align: flex-end on your button wrapper should do the job.
Related
Hi I'm trying to vertically and horizontally center a grid div by using flexbox inside a another div with a background image. It goes to the top left.
.flex_center {
display: flex;
align-items: center;
justify-content: center;
background-color: coral;
opacity: 0.7;
width: 1300px;
height: 485px;
z-index: 0;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-rows: 161px 161px 161px;
grid-template-columns: 360px 940px;
background-color: coral;
}
<section class="hero">
<div class="flex_center">
<div class="grid">
<div class="grid-item-1"><img src="images/logo_hero.png" class="logo_center"></div>
<div class="grid-item-2">
<p class="center">KIA'PALANO SEAFOODS</p>
</div>
<div class="grid-item-3">
<p class="squamish">A Squamish tribal-owned seafood company <br> located along the Squamish River, B.C</p>
</div>
<div class="grid-item-4">
<div class="button">COME ON IN</div>
</div>
</div>
</div>
</section>
I try to let a menu bar within a header stay sticky. The header is a flexbox with vertical align (flex-direction: column). But as you may guess, it does not work.
simplified arrangement
here
HTML
<header>
<div id="quality-logos">
[some images here]
</div>
<div id="logo_motte_top">
[a big logo here]
</div>
<div id="navigation-wrapper">
<div id="navigation">
[some navigation code here]
</div>
<div id="menu_promo_text">
<div>Mo – Sa: 09 – 18 Uhr, So nach Vereinbarung</div>
</div>
</div>
</header>
CSS (shortened)
header{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
div#navigation-wrapper{
position:sticky;
top:0;
}
You can see it live at motteduesseldorf.de
For your website's link, your <header> is a child of another div called #wrapper. position: sticky is probably being applied but it is not visible because the entire <header> div is not in view. Put another way, position: sticky works only "until" its immediate parent.
One way to fix your issue would be to move <div id="navigation-wrapper"> outside of <header> and make it an immediate child of the <div id="wrapper">.
While I am open to any solution, counting tables, Bootstrap and Flexbox, a purely CSS solution using just div elements is greatly appreciated.
HTML
<div class="sentence-summary">
<div class="stat bookmarked">
<i class="fas fa-bookmark"></i>
<span class="count">999</span>
</div>
<div class="stat upvotes">
<i class="fas fa-thumbs-up"></i>
<span class="count">999</span>
</div>
<div class="stat downvotes">
<i class="fas fa-thumbs-down"></i>
<span class="count">999</span>
</div>
<div class="main">
<p>{{ $sentence->body }}</p>
</div>
</div>
SCSS
.sentence-summary {
div {
display: inline-block;
}
.stat {
width: 40px;
text-align: center;
span {
display: block;
font-size: 10px;
}
&.bookmarked {
background-color: red;
}
&.upvotes {
background-color: blue;
}
&.stat.downvotes {
background-color: pink;
}
}
.main {
background-color: green;
}
}
Current Result
Desired Result
I would recommend using a grid layout for this. You can specify that the first three columns (stats) should be 40px wide. And then use '1fr' to say that the 'main' sections should take up the remaining space. Using a grid means that the heights will stay the same.
You can use 'grid-column-gap' to specify the amount of space you would like between each column. Something like this:
.sentence-summary {
display: grid;
grid-template-columns: 40px 40px 40px 1fr;
column-gap: 5px;
grid-auto-rows: 40px;
}
Make sure you use the appropriate browser prefixes as this syntax isn't supported by all browsers. I usually use this auto-prefixer.
Update: Adding grid-auto-rows: 40px; makes sure your 'stats' stay square!
Image captions are aligned bottom by flexbox within a gallery where images have different heights. How can I achieve that first lines of text (titles) are aligned horizontally?
<style type="text/css">
* {
box-sizing: border-box; }
.flex-container {
display: flex;
flex-wrap: wrap; }
.flex-item {
width: 50%;
padding: 20px;
display: flex;
flex-direction: column; }
.flex-item img {
width: 100%;
height: auto; }
.flex-image {
flex: 1 0 auto; }
</style>
<div class="flex-container">
<div class="flex-item">
<div class="flex-image">
<img src="img-1.jpg" alt="" />
</div>
<p>title</p>
</div>
<div class="flex-item">
<div class="flex-image">
<img src="img-2.jpg" alt="" />
</div>
<p>title<br>Lorem ipsum dolor sit amet.</p>
</div>
</div>
Please check my codepen: https://codepen.io/tinusmile/pen/MoeORG
Many thanks!
With the existing markup, where the images can have different heights, you need to do something like this, where you give the p a height.
As an element's overflow defaults to visible, it will flow out of its boundaries, so I recommend to set the height so it can accommodate 2-3 lines of text.
On smaller screens you might need to add a #media query to adjust that height, as if the text is very long it might overflow any element below itself.
.flex-item p {
height: 50px; }
Updated codepen
Note, using min-height instead would solve the might overflow any element below itself issue, though it will make the first line to not align horizontally if the value does not accommodate all the possible amount of lines.
Another option is to remove the flex-item wrapper and use Flexbox's order property, as I suggested in a previous question of yours, align-horizontally-3-elements-over-3-divs
I am trying to style the content of modal title. It will contain a center image, and two smaller columns containing 1 or 2 buttons/images. I would like everything to align vertically and horizontally. The size of the center images varies. Seems like a job for flexbox. In my actual code, the content of #headerLHS/#headerRHS/#myModalLabel is set dynamically
<div class="modal-title row" id="headerBox" class="container-fluid">
<div id="headerLHS" class="col-xs-3"><img id="lhs"/></div>
<div id="myModalLabel" class="col-xs-6"></div>
<div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>
So far my css is:
#headerLHS,#headerRHS {
display: flex; webkit-display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
padding: 0px;
justify-content: space-around;
align-items: center;
}
But this doesn't work. I seem to need styling on #lhs and #rhs but I've no idea what it should be. I've played with all sorts to flex-box markup, to no avail. Can someone help.
Thanks.
You do not have equal height column, you should apply the flexbox on the parent too and set `flex-wrap: wrap;
#headerBox
{
display:flex;
webkit-display: flex;
flex-wrap: wrap;
webkit-flex-wrap: wrap;
}
#headerLHS,#headerRHS {
display: flex;
webkit-display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
padding: 0px;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-title row" id="headerBox" class="container-fluid" style="display:flex;flex-wrap: wrap;">
<div id="headerLHS" class="col-xs-3"><button id="rhs">label</button></div>
<div id="myModalLabel" class="col-xs-6"><img id="lhs" src="http://dummyimage.com/640x4:3" class="img-fluid"/></div>
<div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>
`