Flex - Baseline，水平子对齐内容，拉伸子框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flex - Baseline，水平子对齐内容，拉伸子框相关的知识，希望对你有一定的参考价值。
我想我是一个管理我的内容的好方法，不太确定你是否可能。
认为fexbox可以派上用场......关于我如何划分问题有三个简单的案例
- 我希望有一个带有背景的网格，用于与行中最大元素对齐的项目。
- 我希望所有的东西都在同一行开头，比如：标题，描述
- 我希望有一些项目可以根据内容的数量进行拉伸，但是我希望在网格线中有其他元素，从同一行开始。
目前这主要是我需要的，虽然我无法根据金额管理内容。某些字段可以更长/更短，如描述。
我想到的另一个问题是：
- 如何处理不必要的空白区域？
- 为什么我的网格元素在第二行，按钮被剪切？
另外
- First和Last Element可以有固定的大小。
//=========================== .wrapper { width: 1000px; background: #7BB643; } .flex-box { display: flex; flex-flow: row wrap; flex: 1; } .grid-item { margin: 10px; background: #FFF; flex: 0 1 300px; display: inline-flex; flex-flow: column nowrap; } .flex-item { color: black; display: flex; flex: 1; overflow: hidden; flex-flow: column wrap; } .wishlist-item {} .name {} .long-name {} .desc {} .price-item {} .button-item { justify-content: flex-end; } //============================ //===========colors=========== //============================ .wishlist-item { color: red; } .name { color: grey; } .long-name { color: brown; } .desc { color: orange } .before-price { color: blue; } .price { color: green; }
答案
对于flex-item将flex: 1改为flex: 1 1 auto - 这意味着每个flex-item将flex-basis设置为auto。这将使flex-item和内容一样多。
.wrapper {
width: 1000px;
background: #7BB643;
}
.flex-box {
display: flex;
flex-flow: row wrap;
flex: 1;
}
.grid-item {
margin: 10px;
background: #FFF;
flex: 0 1 300px;
display: inline-flex;
flex-flow: column nowrap;
}
.flex-item {
color: black;
display: flex;
flex: 1 1 auto; /*CHANGED*/
overflow: hidden;
flex-flow: column wrap;
}
.wishlist-item {}
.name {}
.long-name {}
.desc {}
.price-item {}
.button-item {
justify-content: flex-end;
}
//============================
//===========colors===========
//============================
.wishlist-item {
color: red;
}
.name {
color: grey;
}
.long-name {
color: brown;
}
.desc {
color: orange
}
.before-price {
color: blue;
}
.price {
color: green;
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper">
<div class="flex-box">
<div class="grid-item">
<div class="flex-item wishlist-item">
<div>Add to wishlist</div>
</div>
<div class="flex-item name">
<div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
</div>
<div class="flex-item long-name">
<div>
Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
</div>
</div>
<div class="flex-item desc">
<div>
<span>
This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?
</span>
</div>
</div>
<div class="flex-item price-item">
<div class="before-price">
Price
</div>
</div>
<div class="flex-item price-item">
<div class="price">
$567.00
</div>
</div>
<div class="flex-item button-item">
<button class="btn">
Try It
</button>
</div>
</div>
<!-- GridItem/FlexItem -->
<div class="grid-item">
<div class="flex-item wishlist-item">
<div>Add to wishlist
</div>
</div>
<div class="flex-item name">
<div>Qtlxy-name Qtlxy-name Qtlxy-name This can be pretty long 2 can it expand/shrink depending on CONTENT ?
</div>
</div>
<div class="flex-item long-name">
<div class="product-sku">
Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
</div>
</div>
<div class="flex-item desc">
<div>
<span>
As well as it can be short
</span>
</div>
</div>
<div class="flex-item price-item">
<div class="before-price">
Price
</div>
</div>
<div class="flex-item price">
<div class=" before-price ">
$567.00
</div>
</div>
<div class="flex-item button-item ">
<button class="btn ">
Try It
</button>
</div>
</div>
<!-- GridItem/FlexItem -->
<div class="grid-item">
<div class="flex-item wishlist-item">
<div>Add to wishlist</div>
</div>
<div class="flex-item name">
<div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
</div>
<div class="flex-item long-name">
<div>
Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
</div>
</div>
<div class="flex-item desc">
<div>
<span>
This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?
</span>
</div>
</div>
<div class="flex-item price-item">
<div class="before-price">
Price
</div>
</div>
<div class="flex-item price-item">
<div class="price">
$567.00
</div>
</div>
<div class="flex-item button-item">
<button class="btn">
Try It
</button>
</div>
</div>
<!-- GridItem/FlexItem -->
<div class="grid-item">
<div class="flex-item wishlist-item">
<div>Add to wishlist</div>
</div>
<div class="flex-item name">
<div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
</div>
<div class="flex-item long-name">
<div>
Qtlxy-G3-V2-112-Qt
</div>
</div>
<div class="flex-item desc">
<div>
<span>
This text can be small as well
</span>
</div>
</div>
<div class="flex-item price-item">
<div class="before-price">
Price
</div>
</div>
<div class="flex-item price-item">
<div class="price">
$567.00
</div>
</div>
<div class="flex-item button-item">
<button class="btn">
Try It
</button>
</div>
</div>
<!-- GridItem/FlexItem -->
</div>
<!-- FlexBox -->
</div>
<!-- Wrapper -->以上是关于Flex - Baseline，水平子对齐内容，拉伸子框的主要内容，如果未能解决你的问题，请参考以下文章