文章目录
- 给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效） flex:布局又叫伸缩布局，弹性布局，伸缩盒布局，flex布局 flex常见的父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap flex常见的子项属性 flex子项目占的分数 aglin-self控制子项目自己在侧轴的排列方式 order属性定义子项的排列顺序（前后顺序）
- 第一种给父元素设置代码如下 <style> .box{ width:400px; height:400px; border:1px solid black; display:flex; flex-direction: column; /* co1umn 从上到下*/ align-items: center; /* center代表水平方向 */ justify-content: center; /* center代表垂直方向 */ } .content{ width:200px; height:200px; border:1px solid red; text-align: center; line-height: 200px; } </style> <body> <div class = “box”> <div class = “content”>我是垂直居中的盒子</div> </div> </body> 第二种给子元素设置 .box{ width:400px; height:400px; border:1px solid black; display: flex; /* 针对子元素的垂直方向对齐方式 */ align-items: center; /* 对子元素的水平方向对齐方式 */ justify-content: center; } .content{ width:200px; height:200px; border:1px solid red; text-align: center; line-height: 200px; } <div class = “box”> <div class = “content”>使用子元素方法垂直居中</div> </div>
给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效）
flex:布局又叫伸缩布局，弹性布局，伸缩盒布局，flex布局
flex常见的父项常见属性
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex常见的子项属性
flex子项目占的分数
aglin-self控制子项目自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）
第一种给父元素设置代码如下
<style>
.box{
width:400px;
height:400px;
border:1px solid black;
display:flex;
flex-direction: column;
/* co1umn 从上到下*/
align-items: center;
/* center代表水平方向 */
justify-content: center;
/* center代表垂直方向 */
}
.content{
width:200px;
height:200px;
border:1px solid red;
text-align: center;
line-height: 200px;
}
</style>
<body>
<div class = "box">
<div class = "content">我是垂直居中的盒子</div>
</div>
</body>
第二种给子元素设置
.box{
width:400px;
height:400px;
border:1px solid black;
display: flex;
/* 针对子元素的垂直方向对齐方式 */
align-items: center;
/* 对子元素的水平方向对齐方式 */
justify-content: center;
}
.content{
width:200px;
height:200px;
border:1px solid red;
text-align: center;
line-height: 200px;
}
<div class = "box">
<div class = "content">使用子元素方法垂直居中</div>
</div>
发表回复