Alignement du texte vertical et horizontal dans la zone de texte flexible

Question

Comment modifier simplement l'alignement du texte dans une boîte flexible dans ce cas?

J'essaie d'aligner le texte à flex-start, mais quelque chose ne va pas et je ne peux pas comprendre quoi. Je pense que le style principal ne fait pas de changement ou dans ce cas je dois utiliser autre chose, pas un align-items. Je dois aligner tout le texte (md-card-title, md-card-subtitle, md-card-content) au 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> 

Answer 1

Comme le justify-content/align-items propriété est utilisé/set sur le conteneur flexible, élément avec ces propriétés doivent également dispay: flex ou bien ils auront aucun effet.

Et dans ce cas, ce sont ces 4 règles

md-card-title 
md-card-subtitle 
md-card-content 
md-grid-tile 

Certaines des propriétés utilisées n'a pas besoin d'être défini comme ce sont leurs valeurs par défaut (voir les notes en CSS)

Stack extrait de code

md-card { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around;  
 
    /*align-items: stretch;     not needed, default */ 
 
    width: 500px; 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
} 
 

 
md-card-title { 
 
    font-size: 32px; 
 
    display: flex;      /* added */ 
 
    align-items: flex-start; 
 
    /*justify-content: flex-start;   not needed, default */ 
 
} 
 

 
md-card-subtitle { 
 
    display: flex;      /* added */ 
 
    align-items: flex-start; 
 
    /*justify-content: flex-start;   not needed, default */ 
 
} 
 

 
md-card-content { 
 
    display: flex;      /* added */ 
 
    align-items: flex-start; 
 
    /*justify-content: flex-start;   not needed, default */ 
 
} 
 

 
md-grid-tile { 
 
    display: flex;      /* added */ 
 
    align-items: flex-start; 
 
    /*justify-content: flex-start;   not needed, default */ 
 
} 
 

 
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; 
 
}

<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>

Answer 2

Le Flexbox ne fonctionne que sur les éléments enfants directs. Vous essayez d'aligner les éléments en dehors de la "Zone Flexbox". Le md-grid-list ont également besoin display: flex;