フレックスボックスの縦と横のテキストの整列

Question

この場合、フレックスボックスのテキストの整列を変更するだけですか？

テキストをflex-startに揃えようとしていますが、何かがうまくいかず、わかりません。私は主なスタイルは変わっていないと思っています。この場合、別のものを使う必要があります。align-itemsではありません。 flex-startにすべてのテキスト（md-card-title、md-card-subtitle、md-card-content）を整列させる必要があります。

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

がフレックスコンテナに設定/使用されている必要が、これらのプロパティを持つ要素もdispay: flexを必要とするか、または他の彼らは効果がありません。

そして、この場合には、彼らのデフォルトは（CSSでノートを参照）として使用されるプロパティの一部を設定する必要はありませんこれらの4つのルール

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

ある

スタック

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>

スニペット3210

Answer 2

フレキシボックスが唯一の直接の子要素に取り組んでいます。 "Flexbox-Area"の外に要素を配置しようとします。 md-grid-listもjustify-content/align-itemsプロパティとしてdisplay: flex;