Question

在这种情况下如何简单地更改弹性框中的对齐文本？

我正在尝试将文字与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>

Answer 1

Flexbox仅适用于直接子元素。您尝试在＆＃34; Flexbox-Area＆＃34;之外对齐元素。 chat.controller('chat', ['Messages', '$scope', function(Messages, $scope) { // Message Inbox $scope.chats = {}; Messages.user({id: "support-agent", name: "Support Agent"}); // Receive Messages Messages.receive(function(message, isPrivate) { // isPrivate is always true // create a new chat if doesn't exist if(!$scope.chats[message.user.id]) { $scope.chats[message.user.id] = { user: message.user, messages: [] }; } // add messages to the chat $scope.chats[message.user.id].messages.push(message); }); // Send Messages $scope.send = function(to, text) { var message = { to: to, data: text, user: Messages.user() }; Messages.send(message); // because we are sending a message to a user's personal channel, // but not subscribing to it we need to keep track of sent messages // ourselves $scope.chats[to].messages.push(message); }; }]);还需要md-grid-list

Answer 2

由于在Flex容器上使用/设置了justify-content / align-items属性，具有这些属性的元素也需要dispay: flex，否则它们将无效。

在这种情况下，这是4条规则

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

使用的某些属性不需要设置，因为它们是默认值（参见CSS中的注释）

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

垂直和水平文本在flexbox中对齐

2 个答案: