欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

flex容器中的等高行

CSS
方一強2年前8瀏覽0評論

如您所見，第一行中的列表項具有相同的高度。但是第二行中的項目具有不同的高度。我希望所有項目有一個統一的高度。

有什么方法可以在不給定固定高度，只使用flexbox的情況下實現？

enter image description here

這是我的代碼

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

答案是否定的。

原因在flexbox規范中提供:

6.柔性線

在多行flex容器中，每行的交叉尺寸是容納該行中flex項目所需的最小尺寸。

換句話說，當基于行的flex容器中有多行時，每行的高度(“交叉尺寸”)是包含該行上的flex項目所需的最小高度。

但是，在CSS網格布局中，等高行是可能的:

CSS網格布局中的等高行 否則，考慮JavaScript替代方案。

現在，您可以使用display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Flexbox:使所有flex項目高度相同？

在子項中

align-self: stretch;

或者在父容器中

justify-content: stretch;

對于橫向問題，您可以使用flexbox:

.flex-list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.flex-list li {
    width: 120px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
}

<ul class="flex-list">
  <li>title 1</li>
  <li>title 2</li>
  <li>title 3<br>new line</li>
  <li>title 4<br>new line</li>
  <li>title 5<br>new<br>line</li>
  <li>title 6</li>
</ul>

不，如果不設置一個固定的高度(或使用腳本)，你就無法實現這一點。

以下是我的兩個回答，展示了如何使用腳本來實現這樣的事情:

如何從卡片或類似物上獲得與flex box相同高度的標題？

伸縮方向列伸縮容器中伸縮項的高度相同

這似乎適用于父母身高固定的情況(在Chrome和Firefox中測試過):

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

如果因為某種原因無法使用網格，也許這就是解決方案。

如果您知道要映射的項目，可以通過一次一行來完成。我知道這是一種變通方法，但確實有效。

對我來說，每行有4個項目，所以我把它分成兩行，每行4個:50%，去掉flex-grow，have & ltRowOne />并且& ltRowTwo />在一個& ltdiv & gt帶彈性柱。這將達到目的

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

你應該為你的flex顯示使用justify-content:stretch和align-items:stretch屬性，我認為這會使flex中的每個元素的高度相等

您可以通過以下方式實現這一目標:

align-items: stretch;

這將把每個項目拉伸到flex中具有最大高度的元素的高度。

使用flex-direction: row時，您可以通過項目上的heigh: auto來實現:

.parent {
  display: flex;
  flex-direction: row;
}
.item {
  height: auto;
}

我也遇到了類似的問題，我使用了下面的CSS代碼:

.Box{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

但它的高度與屏幕不同，這就是為什么它看起來只是在中間放置了一個項目。enter image description here

因此，我使用了下面的代碼，它將給出用戶的確切屏幕高度，并且由于flex，它將完美地響應:

var r = document.querySelector(':root');
let height = $(window).height()+"px";
r.style.setProperty('--height', height);

:root{
    --height: 643px;
}

.Box{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
     height: var(--height); 
}
.btn-outline-primary{
    /* border-top-left-radius: 25%;
    border-top-right-radius: 25%;
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%; */
    width: 100%;
    border-radius: 25px;
    margin: 0px 5px 5px 0px;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel='stylesheet' href='./Welcome.css'>

    <title>Point Of Sale</title>
  </head>
  <body>

    <div class="Box border ">
        <h1>Welcome TO POS</h1>
        <div class="">
            <button type="btn" class="btn btn-outline-primary btn-lg"> Log in</button>
            <button type="btn" class="btn btn-outline-primary btn-lg"> Sign in</button>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> -->

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    <script src="./Welcome.js"></script>

  </body>
</html>

有時候，容器的高度是動態的。在使用Flexbox的情況下，我的goto解決方案是:

在列表項中添加一個空標記。 用JS，設置高度(凌亂)。 在列表項中添加一個空標記:

只需在列表項中添加一個空標簽 比如說a & ltspan />標簽。

.parent {
  display: flex;
}

.child {
  display: inline-block;
  align-self: flex-end;
}

這就行了。因為& ltspan />標記與flex-end對齊，它將移動到列表項的末尾。所有物品看起來都一樣高。同樣的道理也適用于寬度。

總之

只需根據您的要求在主flex-box中添加“調整內容”或“對齊項目”。

哇哦！

可以通過固定“P”標簽的高度或者固定“list-item”的高度來實現。

我已經固定了“P”的高度

溢出應該被隱藏。

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

在你的情況下，身高會自動計算，所以你必須提供身高 用這個

.list-content{
  width: 100%;
  height:150px;
}

對于相同的高度，你應該改變你的css“顯示”屬性。更多細節請參見給定示例。

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>