Flex - 基线，水平子对齐内容，拉伸子框

时间：2017-09-30 11:13:36

标签： html css css3 flexbox alignment

我认为我管理我的内容不太合适，不太确定你是否可能。

认为fexbox可以派上用场...... 关于我如何划分问题，有3个简单案例

  1. 我想要一个带有背景的网格，用于与行中最大元素对齐的项目。
  2. 我希望所有的东西都在同一行开头，例如：title，description
  3. 我想根据内容的数量来扩展一些项目，但是我希望在网格线中有其他元素，从同一行开始。

    4. 目前这主要是我需要的，虽然我无法根据金额管理内容。 某些字段可以更长/更短，如描述。

    我想到的另一个问题是：

    1. 如何处理不必要的空格？
    2. 为什么我的网格元素在第二行，按钮被剪切？

      3. 此外

      1. 第一个和最后一个元素可以有固定的大小。

        //===========================
.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;
}

        2. https://jsfiddle.net/Przmak/feeyL8L4/

1 个答案:

答案 0 :(得分：1)

对于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: 0 0 auto，wishlist-item和price-item使用button-item。您可以使用margin-top: auto提取价格部分 - 请参阅下面的演示：

.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 {
  flex: 0 0 auto; /* ADDED */
}

.name {}

.long-name {}

.desc {}

.price-item, .price {
  margin-top: auto; /* ADDED */
  flex: 0 0 auto; /* ADDED */
}

.button-item {
  /*justify-content: flex-end;*/
  margin-top: auto; /* ADDED */
  flex: 0 0 auto; /* ADDED */
}

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

相关问题
最新问题