11

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

 _____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________



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

 _____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________


我的要求：

  • 弹性容器必须保持在 100% 的高度
  • 弹性项目必须保持 25% 的高度（等于 100%，这是它的默认值）。
  • 弹性项目必须垂直居中。
  • 这必须是响应式的并且足够聪明以保持在每个设备的中间（所以没有行高/填充）

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; }
4

4 回答 4

9

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

我相信那里会有内容，包裹在标签中，然后您可以再次在DEMOflex中使用和设置子项margin:auto;

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;
}
于 2014-05-03T09:45:56.893 回答
6

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

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

于 2017-07-02T14:53:32.373 回答
3

您的问题与所谓的 flex-box 并没有真正的关系，实际上您要对齐的是div 的内容（而不是div），所以只需使用一些技巧来正常对齐它。这是其中的技巧之一：

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

演示。

于 2014-05-03T09:44:13.593 回答
1

这是解决问题的Flex方式：

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;
}
于 2014-06-06T16:39:58.527 回答