[英]CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?
目前我的“flex”項目看起來像這樣(垂直對齊:頂部)......
_____________________________________
1
_____________________________________
2
_____________________________________
3
_____________________________________
4
_____________________________________
我的目標是使它們看起來像這樣(垂直對齊:中間)......
_____________________________________
1
_____________________________________
2
_____________________________________
3
_____________________________________
4
_____________________________________
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; }
要垂直對齊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>
也許帶有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;
}
你的問題與所謂的flex-box並沒有關系,實際上你要對齊的是div的內容 (不是div
),所以只需使用一些技巧來對齊它。 這是一個技巧:
div:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
也許我誤解了,但你不能這樣做:
HTML(超薄)
.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
這是解決你的問題的Flex三通:
<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>
/* 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.