CSS Flex Box：如何在不丢失弹性项高度的情况下将“弹性项目”垂直对齐到中间？

4 回答

• 3

  也许我误解了，但你不能这样做：

  HTML (Slim)

  .container
    .item 1
    .item 2
    .item 3
    .item 4
  

  CSS

  .container {
    display:flex;
    flex-direction: column;
    height: 100vh;
  }
  .item {
    flex-grow: 1;
    display:flex; 
    align-items:center;
    border-bottom:2px solid #e8e288;
  }
  

  这是Codepen

  回复于 2024-04-29T18:36:12+08:00
• 1

  要垂直对齐flexbox子项的内容，您需要应用其他一些技巧 .

  我相信那里会有内容，包含在标签中，然后你可以再次使用 flex 并在 margin:auto; 中设置子项 DEMO

  ---

  CSS更新：

  /* Flex Box */
   section {
      padding: 1em;
      background: black;
      display: flex;
      flex-flow: column;
      height: 100%;
      justify-content: space-around;
  }
  /* Flex Items */
   div {
      border-top: 1px solid #ccc;
      background: #f2f2f2;
      height: 25%;
      display:flex;/* be a flexbox too */
  }
  div:first-child {
      border-top: 1px solid transparent;
  }
  div:hover {
      background: white;
  }
  p { /* or any child of flex box used */
      margin:auto;/* here center/middle align */
  }
  

  HTML结构：

  <!-- Flex Box -->
  <section>
      <!-- Flex Items , Flex Box themselves -->
      <div>
          <p style="width:100%;/* to fill entire width*/">1</p> <!-- Flex Items  -->
      </div>
      <div>
          <p>2</p><!-- Flex Items  -->
      </div>
      <div>
          <p>3</p><!-- Flex Items  -->
      </div>
      <div>
          <p>4</p><!-- Flex Items  -->
      </div>
  </section>
  

  ---

  Maybe a fallback 与 display:table ，可以有用： DEMO 2

  /* fall back IE8 ie */
  html, body, section {
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      height:100%;
      width:100%;
  }
  section {
      display:table;
  }
  section > div {
      display:table-cell;
      vertical-align:middle;
  }
  
  /* Flex Box */
   section {
      padding: 1em;
      background: black;
      display: flex;
      flex-flow: column;
      height: 100%;
      justify-content: space-around;
  }
  /* Flex Items */
   section > div {
      border-top: 1px solid #ccc;
      background: #f2f2f2;
      height: 25%;
      display:flex;
  }
  section > div:first-child {
      border-top: 1px solid transparent;
  }
  section > div:hover {
      background: white;
  }
  p {
      margin:auto;
  }
  

  回复于 2024-04-29T18:36:12+08:00
• 3

  你的问题与所谓的flex-box并没有关系，实际上你要对齐的是 content of the div （而不是 div ），所以只需使用一些技巧来正确对齐它 . 这是一个技巧：

  div:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
  }
  

  演示 .

  回复于 2024-04-29T18:36:12+08:00
• 9

  这是解决问题的方法：

  HTML

  <div style="height:300px;"> <!-- Just to test/change the height of <section> element -->
  <!-- Flex Box -->
  <section>
      <!-- Flex Items -->
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  
  </section>
  </div>
  

  CSS

  /* Flex Box */
  section {
      padding: 1em;
      background: black;
      display: flex;
      flex-flow: column;
      height:100%;
      justify-content: space-around;
  }
  
  /* Flex Items */
  /* Child selector(>) is used to select <div> elements inside <section> element*/
  section > div {
      border-top: 1px solid #ccc;
      background: #f2f2f2;
      height: 25%;
  
      /* Added code */
      display: flex;       /* Gives inner div flex display */
      align-items: center; /* Centers the div in the cross axis */
      /**************/
  }
  section > div:first-child {
      border-top: 1px solid transparent;
  }
  section > div:hover {
      background: white;
  }
  

  回复于 2024-04-29T18:36:12+08:00