如何使用CSS flexbox垂直对齐和拉伸内容

mqxuamgl  于 2023-04-08  发布在  其他
关注(0)|答案(4)|浏览(316)

使用CSS flexbox,我如何在不使用css height属性的情况下,同时垂直居中一行中所有div的内容,同时保持所有div的高度相同?
HTML

<!DOCTYPE html>
<html>
  <body>
    <div class="Grid">
      <div class="Grid-cell">
        1<br>
        1<br>
        1<br>
        1<br>
      </div>
      <div class="Grid-cell">2</div>
      <div class="Grid-cell">
        3<br>
        3<br>
      </div>
    </div>
  </body>
</html>

CSS:

.Grid {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.Grid-cell {
  flex: 1;
  text-align: center;
}

(see http://jsbin.com/efaCEVa/1/edit

hvvq6cgz

hvvq6cgz1#

.outer {
  align-items: stretch;
  display: flex;
}

.inner {
  align-items: center;
  display: flex;
}
<div class='outer'>
  <div class='inner'>A</div>
  <div class='inner'>B</div>
  <div class='inner'>C</div>
</div>
pvabu6sv

pvabu6sv2#

.item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex
lstz6jyr

lstz6jyr3#

如果在子对象上设置flex: 1,它将拉伸以填充空间。
然后可以在子容器上执行align-items: center

.container {
  display: flex;
}

.item {
  flex: 1;
  display: flex;
  align-items: center;
  width: 200px;
  background-color: cadetblue;
  color: white;
  padding: 1rem;
  margin: 1rem;
}

.content {
  padding: 1rem;
  border: 2px solid lightcoral;
}
<div class="container">
        <div class="item">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Pulvinar neque laoreet suspendisse interdum consectetur libero.
                Diam sit amet nisl suscipit adipiscing bibendum est.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Duis tristique sollicitudin nibh sit amet. Platea dictumst
                vestibulum rhoncus est pellentesque.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Aliquam vestibulum morbi blandit cursus
            </div>
        </div>
    </div>
pgky5nke

pgky5nke4#

Flexbox没有理由这样做。table/table-cell属性已经能够做到这一点很长时间了:
http://cssdeck.com/labs/qsirepkh

ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

这是Flexbox的外观:
http://codepen.io/cimmanon/pen/BfDAk

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

相关问题