CSS Flex Box：如何垂直对齐“flex项目”到中间，不会失去flex项目高度？ [英] CSS Flex Box: How to vertically align "flex items" to middle without losing flex item height?

问题描述

目前我的flex项目看起来像这样（垂直对齐：top）...

  _____________________________________ 
 1 
 
 _____________________________________ 
 2 
 
 _____________________________________ 
 3 
 
 _____________________________________ 
 4 
 
 _____________________________________ 
  

我的目标是它们看起来像这样（垂直对齐：中间）...

  _____________________________________ 
 
 1 
 _____________________________________ 
 
 2 
 _____________________________________ 
 
 3 
 _____________________________________ 
 
 4 
 _____________________________________ 
  




我的要求：

• flex容器必须保持高度的100％


• flex项目必须保持25％的高度（等于100％


• 这必须是响应式的，并且足够聪明地留在每个设备的中间值（所以没有行高/填充）

http://jsfiddle.net/oneeezy/p4XtA/

HTML

 <！ -  Flex Box  - > 
< section> 
 
<！ -  Flex项目 - > 
< div> 1< / div> 
< div> 2< / div> 
< div> 3< / div> 
< div> 4< / div> 
 
< / section> 
  

CSS

  / * Flex Box * / 
 section {padding：1em;背景：黑色;显示：flex; flex-flow：column;高度：100％; justify-content：空间; } 
 
 / * Flex Items * / 
 div {border-top：1px solid #ccc;背景：＃f2f2f2;身高：25％ } 
 div：first-child {border-top：1px solid transparent; } 
 div：hover {background：white; }为了垂直对齐fexbox子对象的内容，你将会：a。需要应用一些其他技术。
 
 
 
我相信会有内容，包裹在标签中，然后可以再次使用 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 {/ *或任何使用flex框的子项* / 
 margin：auto; / * here center / middle align * / 
} 
  
 HTML结构：
  ;！ -  Flex Box  - > 
< section> 
<！ -  Flex Items，Flex Box自己 - > 
< div> 
< p style =width：100％; / *填充整个宽度* /> 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> 
 
 
 
 
 
 
 
 可能是后备  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; 
} 
  
 
Currently my "flex" items look like this (vertically aligned: top)...
 _____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________




My Goal is to make them look like this (vertically aligned: middle)...
 _____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________



My requirements:


The flex container must stay at 100% in height
The flex items must stay 25% in height (equaling 100%, which is its default anyway).
The flex items must be vertically centered.
This must be responsive and be smart enough to stay in the middle per device (so no line-height/padding)


http://jsfiddle.net/oneeezy/p4XtA/

HTML
<!-- Flex Box -->
<section>

    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>
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%; }
div:first-child { border-top: 1px solid transparent; }
div:hover { background: white; }

解决方案
To vertical align content of fexbox child, you will need to apply some other techniques.

I believe there will be content there , wrapped in tag, You can then again use flex and set child in margin:auto;
DEMO



CSS updated :
/* 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 structure :
<!-- 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 with display:table , can be usefull : 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;
}


                        
这篇关于CSS Flex Box：如何垂直对齐“flex项目”到中间，不会失去flex项目高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！