Css FlexBox彼此相邻对齐，但宽度设置为100%

很抱歉标题不好，我不知道如何更好地解释我的问题。请随意把它换成更好的

此外，我是刚接触Flexbox的人，这使得追踪我的问题变得更加困难。所以我设立了一个网站来展示我的问题

/*布局*/
#页面内容包装器{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
最小高度：100%；
填充：25px；
}
/*固有*/
#柔性容器{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
/*弯曲*/
.rowParent，
.家长{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒方向：正常；
-webkit盒方向：水平；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
-webkit盒包：开始；
-webkit内容：flex start；
-ms-flex-pack：启动；
调整内容：灵活启动；
}
.家长{
-网络工具包盒方向：垂直；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
flexMother女士{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}
flexChild先生{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
显示器：flex；
}
topflex先生{
-webkit-align-self:flex-start；
-ms flex项目对齐：flex开始；
自我校准：灵活启动；
宽度：100%；
}
.bottomflex{
-webkit自对准：柔性端；
-ms柔性项目对齐：柔性端；
自对准：柔性端；
}
#阿克图尔斯{
边框：1px实心#004985；
}
#贝苏彻，
#劳姆普兰，
#媒体,，
#头条新闻，
#德尼克{
边框：1px实心#A0；
}
#贝苏彻，
#劳姆普兰，
#头条新闻{
边缘底部：35px；
}
#阿克图尔斯{
右边距：25px；
}
#贝苏彻，
#劳姆普兰，
#媒体{
右边距：12px；
}
#头条新闻，
#德尼克{
左边距：13px；
}
新闻前线{
填充：20px；
}
文章。新闻封面：最后一种类型{
页边距底部：0；
}
文章。新闻标题：类型部分的最后一个{
边框底部：无；
}
文章.新闻![2]前面部分{
边框底部：1px实心#004985；
}
article.news\u首页第p部分：第一种类型{
显示：内联；
}
第1条besucher_前面部分{
左边距：45像素；
}
topflex先生{
背景色：红色；
}
.bottomflex{
背景颜色：灰色；
}

阿克图尔斯
13112014，16:09 Uhr
同侧眼线

13112014年12:00 Uhr
同侧眼线

13112014年8月15日Uhr
同侧眼线

历史学
贝苏彻
她是我的朋友

空间体量设计
Für heute是keine Raumbelegung eingetragen

媒体
图像在这里

头条新闻
同侧眼线

历史学
特赫尼克
3.1.2015，21:36 Uhr
同侧眼线

历史学

您可以使用

柔性方向：列

并将其与

调整内容：之间的空格相结合或通过
柔性包裹：包裹使用多行flexbox
弹性项目一个接一个地显示，因为默认情况下，设置为
nowrap
，因此子项被强制进入单个项目

为了允许弹性项目分成多行，可以使用

.flexChild{
柔性包装：包装；
}


/*布局*/
#页面内容包装器{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
最小高度：100%；
填充：25px；
}
/*固有*/
#柔性容器{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
/*弯曲*/
.rowParent，
.家长{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒方向：正常；
-webkit盒方向：水平；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
-webkit盒包：开始；
-webkit内容：flex start；
-ms-flex-pack：启动；
调整内容：灵活启动；
}
.家长{
-网络工具包盒方向：垂直；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
flexMother女士{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}
flexChild先生{
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
显示器：flex；
柔性包装：包装；
}
topflex先生{
-webkit-align-self:flex-start；
-ms flex项目对齐：flex开始；
自我校准：灵活启动；
宽度：100%；
}
.bottomflex{
-webkit自对准：柔性端；
-ms柔性项目对齐：柔性端；
自对准：柔性端；
}
#ak