在這種情況下,如何簡單地更改flex框中的文本對齊?flexbox中的垂直和水平文本對齊
我想將文本與flex-start
對齊,但出現了問題,我不明白是什麼。我認爲主要風格不會改變,或者在這種情況下我需要使用別的東西,而不是align-items
。我需要將所有文本(md-card-title
,md-card-subtitle
,md-card-content
)與flex-start
對齊。
goods.component.css
:
md-card {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
width: 500px;
margin-top: 25px;
margin-bottom: 25px;
}
md-card-title {
font-size: 32px;
align-items: flex-start;
justify-content: flex-start;
}
md-card-subtitle {
align-items: flex-start;
justify-content: flex-start;
}
md-card-content {
align-items: flex-start;
justify-content: flex-start;
}
md-grid-tile {
align-items: flex-start;
justify-content: flex-start;
}
h1 {
color: #673ab7;
text-align:center;
margin: 1em 0 0.5em 0;
font-weight: 100;
text-transform: uppercase;
font-style: italic;
font-family: 'Josefin Sans', sans-serif;
font-size: 58px;
line-height: 54px;
text-shadow: 2px 5px 0 rgba(0,0,0,0.2);
}
a {
font-size: 24px;
text-decoration: none;
color: #673ab7;
}
.price-content{
font-size: 18px;
background: #00bd0d;
float: left;
height: 22px;
line-height: 22px;
padding: 0px 9px 0px 9px;
color: #ffffff;
margin-bottom: 8px;
}
goods.component.html
:
<h1>All goods</h1>
<md-card>
<md-grid-list cols="3" rowHeight="3:1">
<md-grid-tile [colspan]="1" [rowspan]="3">
<img md-card-image src='./assets/image/001.jpeg' alt='picture'>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-card-title><a [routerLink]='["/goods"]'>Audi A8</a></md-card-title>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-card-subtitle>Description Description Description Description Description Description Description Description Description</md-card-subtitle>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-card-content class="price-content">50000 $</md-card-content>
</md-grid-tile>
</md-grid-list>
</md-card>
請解釋你得到了什麼和你的期望。 – Algiz
我把所有的文字都放在了中心區域。想要將其更改爲flex-start –