html,body {
  height: 100%;
}
body {
  font-family: sans-serif;
}
.container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

<div>
  <h3>Title</h3>
  <hr/>
  <div>
    <p>This is some content</p>
  </div>
</div>

查看this pen.

这种行为在Firefox和Chrome上得到证实.我没有找到任何解释.我该怎么解决？

hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }

具体来说,请注意margin-left：auto,margin-right：auto.

这些样式用于水平居中的块元素.根据Calculating widths and margins – Block

If both margin-left and margin-right are auto,their used values
are equal. This horizontally centers the element with respect to the
edges of the containing block.

在块布局中,如果块具有明确的宽度,则该效果才会显着,否则块将增长以覆盖其所有包含的块.

在FlexBox中,它类似：默认的align-self: auto和align-items: stretch使Flex项目增长,以覆盖交叉轴上的Flex线(列布局中的水平线)和auto margins can also be used to center.

然而,有很大的区别：根据Cross Size Determination,align-self：stretch不会影响具有自动边距的flex项目：

If a flex item has 07006,its computed cross size
property is auto,and neither of its cross-axis margins are auto,
the used outer cross size is the used cross size of its flex line,
clamped according to the item’s min and max cross size properties.
Otherwise,the used cross size is the item’s 07007.

然后,您可以通过删除自动边距来解决此问题：

hr {
  margin-left: 0;
  margin-right: 0;
}

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
hr {
  margin-left: 0;
  margin-right: 0;
}

<div>
  <h3>Title</h3>
  <hr />
  <div>
    <p>This is some content</p>
  </div>
</div>

或者,通过宽度或最小宽度强制一定宽度将抵消由自动边缘引起的收缩(更技术上,缺乏拉伸).

1 .box{
2     display: flex;
3     display: -webkit-flex;     /*兼容Safari（ios）*/
4 }

 1 export const FlexBox = styled.div`
 2   width: 1000px;
 3   margin: 0 auto;
 4   background: #7B68EE
 5   display: flex;
 6   display: -webkit-flex;
 7   flex-direction: row | row-reverse | column | column-reverse;
 8 `;
 9 
10 export const FlexBoxItem = styled.div`
11   background: #FFD700;
12   width: ${props => props.width?props.width:''100px''};
13   height: ${props => props.width?props.width:''100px''};
14   margin: 10px;
15 `;

 2.flex-warp 属性

主要参数：nowrap | wrap | wrap-reverse

主要代码：

 1 export const FlexBox = styled.div`
 2   width: 500px;
 3   margin: 0 auto;
 4   margin-top: 100px;
 5   background: #7B68EE
 6   display: flex;
 7   display: -webkit-flex;
 8   flex-warp: nowrap | wrap | wrap-reverse;
 9 `;
10 
11 export const FlexBoxItem = styled.div`
12   background: #FFD700;
13   width: ${props => props.width?props.width:''100px''};
14   height: ${props => props.width?props.width:''100px''};
15   margin: 10px;
16 `;

nowrap

不换行，会挤在一行，之前设定的宽度会失效，margin仍有效，图一为三个，图二为多个

wrap

换行，且第一行在上方

 换行，且第一行在下方

3.flex-flow属性

wrap column

靠左，垂直

 4.justify-content属性

主要参数： flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline

flex-end

终点对齐，注意这边和上面的flex-direction:row-reverse不同，他并没有调整子元素的顺序

center

居中

space-between

两端对齐，子元素之间间隔相等

space-around

均匀排列，每个元素周围分配相同的空间（好了，是时候和margin说再见了）

 

space-evenly

均匀排列，每个元素之间的间隔相等

 

5.align-items 属性

定义在交叉轴上的对齐方式

主要参数： flex-start | flex-end | center | baseline | stretch

主要代码：雷同不放

flex-start

靠上对齐

flex-end

靠下对齐

center

垂直居中（贼好用，我不管我要标红）

baseline

第一行文字对齐，这个可以用来做效果

 大致就是以上这些，连代码带查资料写了2个多小时，脑壳疼