flex布局实现居中
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档弹性布局Flexbox一、Flexbox的应用场景二、具体实例1.占比例分配:2.不定宽高的垂直水平居中:一、Flexbox的应用场景根据元素个数的变化,自主的适配容器的占比例如:电商页面的标签二、具体实例1.占比例分配:样式如下(示例):代码如下(示例):.flex_parent{display: -webkit-flex; //标
·
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
弹性布局Flexbox
一、Flexbox的应用场景
根据元素个数的变化,自主的适配容器的占比
例如:电商页面的标签
二、具体实例
1.占比例分配:
样式如下(示例):
代码如下(示例):
.flex_parent{
display: -webkit-flex; //标示使用flexbox弹性盒子
color: #fff;
text-align: center;
width: 300px;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.item_one{
flex:1; //flex:num 占容器比例 四分之一
background-color: orange;
}
.item_two{
flex:2; //占容器四分之二
background-color: blueviolet;
}
.item_three{
flex:1;
background-color: blue;
}
2.不定宽高的垂直水平居中:
下面给大家介绍两种 这是面试经常遇到的哦
1.使用绝对定位实现
2.利用弹性盒子实现
1.使用绝对定位实现(示例):
body{
background-color: rebeccapurple;
margin: 0;
padding: 0;
}
.my_parent{
background-color: peru;
text-align: center;
line-height: 160px;
font-size: 20px;
color: #fff;
/* 重点来咯 */
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
-webkit-transform: translate(-50%,-50%);
border-radius: 6px;
}
2.利用弹性盒子实现:
.flex_parent{
width: 300px;
height: 160px;
background-color: peru;
color: #fff;
/* 重点来咯 */
justify-content: center; /* 子元素水平居中 */
align-items: center; /* 子元素垂直居中 */
display: -webkit-flex;
}
.flex_item{
padding: 20px;
text-align: center;
font-size: 20px;
line-height: 90px;
background-color: #000;
}
<div class="flex_parent">
<div class="flex_item">利用flex实现</div>
</div>
效果如下:
结尾:
不喜勿喷,生命不易。任何建议都可评论私信哦
更多推荐
已为社区贡献1条内容
所有评论(0)