Question

我的flex-box有问题。我想要一个有两行的列，第二行有2列。但是我想只使用一个包装元素（我不想将第二行包装成div）。问题是我只想要第二行元素拉伸。

HTML

#wrap {
  display: flex;
  flex-flow: row wrap;
  height: 500px;
  border: 3px solid yellow;
}

header {
  background-color: white;
  width: 50px;
  flex: 1 100%;
  height: 40px;
}

#a {
  background-color: green;
  flex-grow: 1;
}

#b {
  background-color: red;
  flex-grow: 1;
}

CSS

     var chats = (from c in _entities.Chats
        where c.SenderId == userId || c.ReceiverId == userId

            select new ChatList()
             {
              Logo = c.SenderId != userId ? c.Company.LogoUrl:c.Company1.LogoUrl,
              Name = c.SenderId != userId? c.Company.CompanyPersonName:c.Company1.CompanyPersonName,
            UserId = c.SenderId!=userId ?c.Company.CompanyId : c.Company1.CompanyId 
            }
   ).Distinct();

我设法按照我希望它们定位的方式制作它们，但是第一个列元素只是不想将其设置为他而不是它的高度，它为包装器的垂直50％留下了一个空白空间

如果第二行没有额外的包装，有没有办法做到这一点？

谢谢！

Answer 1

有点hackish，align-self: flex-end;和父母的负余额。

请参阅https://jsfiddle.net/C14L/1rj3kdkb/

柔性盒拉伸问题

1 个答案: