用flex布局垂直居中，子元素过多导致无法显示

Squall001 2017-09-29 12:22:13 


<!DOCTYPE html>



<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>示例</title>

</head>

<body>



<div id="PriceDetailPad" style="display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(222, 204, 204,0.4);" onclick="DelPriceDetail()">

    <div style="overflow:auto;display:flex;align-items:center;justify-content:center;flex-direction:column; text-align:center;background-color:white;width:100%;height:30%;top:25%;width:85%;margin:0 auto;position:relative;">



                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-09-28</span>   价格<span style="font-size:large;color:cornflowerblue">258</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-09-29</span>   价格<span style="font-size:large;color:cornflowerblue">268</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-09-30</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-01</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-02</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-03</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-04</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-05</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-06</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-07</span>   价格<span style="font-size:large;color:cornflowerblue">338</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-08</span>   价格<span style="font-size:large;color:cornflowerblue">258</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-09</span>   价格<span style="font-size:large;color:cornflowerblue">258</span></p>

                <p style="flex:1;font-size:medium;border:1px dashed #FFF;">入住日期:<span style="font-size:large;color:cornflowerblue">2017-10-10</span>   价格<span style="font-size:large;color:cornflowerblue">258</span></p>     

    </div>

</div>

</body>

</html>

我发现，子元素一旦超过容器高度，就会出现只能显示在容器外面了，用滚动条也不行，如下图

这个怎么解决呢？
...全文
959 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
HDdgut 2021-04-21
  • 打赏
  • 举报
 回复
flex-shrink:0;
技术成长ing 2019-09-20
  • 打赏
  • 举报
 回复
感谢感谢，受楼主启发，我的问题也解决了。
Squall001 2017-10-02
  • 打赏
  • 举报
 回复
最后我自己解决了，无论在单个还是多个，都可以实现垂直居中 

<!DOCTYPE html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>示例</title>
<style>
.main {
	display: flex;
	flex : 1;
	justify-content : center;
	flex-direction : column;
	align-items : center;
	height : 600px;
}
.container {
	display: flex;
	flex-direction : column;
	align-items : center;
    width:100%;
    height:50%;
    overflow-x:scroll;
    flex-flow:wrap;
	background-color:rgba(222, 204, 204,0.4);
    justify-content:center;

}
.container div{
	font-size:medium;
	border:1px dashed #FFF;
	text-align:center;
	width : 100%;
	height : 10%;
	margin : 5px;
}
.container div span {
	height : 100%;
}
.container div span label {
	font-size:large;
	color:cornflowerblue;
}
</style>
</head>
<body>
    <div class='main'>
        <div class='container'>
<div>
    <span>入住日期:<label>2017-09-23</label></span>
    <span>价格:<label>258<label></span>
</div>
<div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div>
<div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div><div>
    <span>入住日期:<label>2017-09-21</label></span>
    <span>价格:<label>258<label></span>
</div>
        </div>
    </div>

</body>
</html>
天际的海浪 2017-09-29
  • 打赏
  • 举报
 回复
去掉justify-content:center;
Squall001 2017-09-29
  • 打赏
  • 举报
 回复
我想了下，flex布局好像不能做到这种效果，需要js去判断中间P标签的个数和高度和。 我这里想要做到的效果就是，在容器里面只有单个元素的时候，是垂直居中的，也就是那个p标签是在整个DIV正中心的位置，那么如果按照此排列，如果P标签的个数多了，超过了整个DIV的高度，那么flex还是按照此规则排列的，也就是中间那个P标签在正中心，其他的自然而然的就被溢出到上面去了，
Squall001 2017-09-29
  • 打赏
  • 举报
 回复
引用 1 楼 jslang 的回复:
去掉justify-content:center;
我试过这样的，但是在容器里面只有单个P标签的时候，是不用做到垂直居中的
Flex布局实现div内部子元素垂直居中的示例
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。        采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main en
flex布局演示代码（弹性布局演示代码）
flex布局显示教程，子元素在父元素下实现弹性布局，给父元素开启弹性布局。让子元素在父元素下实现水平垂直居中。
css高频笔试题目精讲
css常见单位rpx、px、em、rem、%、vh、vw的区别，垂直居中水平居中，利用css构建三角形（正三角，倒三角，左/右三角），响应式布局的方式，几种，媒体查询原理，flex布局，父相子绝，css常见单位rpx、px、em、rem、%、vh、vw的区别，垂直居中水平居中，0.5px的线如何实现，sass的常用功能，弹性布局flex-direction，justify-content，align-items，弹性布局 网页内容要可以随显示设备的大小而动态调整布局 float属性，的确可以实现根据显示设备大小，自动换行显示。但是，浮动定位float提供的可控制的属性太少了，以至于难于随心所欲的控制布局。 比如：多个元素浮动在一行中时，无法保证屏幕变小时，一行中的每个元素都自动等比例缩小。而是每个元素依然保持固定的宽度。就会导致，原本处在一行的元素，被挤压换行。 弹性布局就很好的解决了多种设备下自适应和灵活定制布局的目的 弹性布局主要定义父元素中子元素的布局方式，让布局能适用多种情况提供最大灵活性 概念： 容器 父元素 项目 多个子元素 主轴 子元素排列方向上的轴，默认从左向右 交叉轴
frontend-training：前端练习项目
前端训练 前置练习项目 仿拉勾网首页 仿照拉勾网pc端的首页和登录页，参照千锋教育的一个实战课程 技术栈：HTML + CSS 总结： 在父级元素内，子元素（块级）水平居中的方法是使用绝对定位，left属性设置为50％，margin-left属性设置为-x，x为子元素宽度的一半；垂直居中的方法类似。或者用flex布局解决 子元素文本内容垂直居中的方法：属性高度与line-height（行高）设置为一样，都等于元素的高度，这种做法实际上是增加了行距，参考 父级元素高度受到子元素影响问题的解决，参考 使用display：inline-block可以使用内联元素可以设置宽高，参考 简易表单验证 网易云课堂原生JS项目实战，表单验证 技术栈：原生JS 总结： viewport视窗大小自适应设置，参考 布局模式之flex弹性布局，参考和 min-height使用的替代是父级元素需要有明确的heig
flex布局以及实现垂直居中
flex布局的原理 给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效） flex:布局又叫伸缩布局，弹性布局，伸缩盒布局，flex布局 flex常见的父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章