如何实现一个左中右的布局
在flex出现之前
#box{
color: white;
}
#left{
float: left;
width: 30%;
background-color: red;
}
#right{
float: right;
width: 20%;
background-color: green;
}
#center{
background-color: blue;
overflow:hidden; /* 去除浮动换成 margin: 0 20% 0 30%; 效果一样 */
}
<div id="box">
<div id="left">左</div>
<div id="right">右</div>
<!-- 浮动的元素一定要写在没浮动的样式前面 -->
<div id="center">中间</div>
</div>
使用flex
#box{
display: flex;
color: white;
}
#left{
width: 30%;
background-color: red;
}
#right{
width: 20%;
background-color: green;
}
#center{
background-color: blue;
flex: 1;
}
<div id="box">
<div id="left">左</div>
<div id="center">中间</div>
<div id="right">右</div>
</div>
上面看起来flex也没什么牛逼的地方啊
但是当你试着去#left里放上一张不知道高度的图片时,你会知道中间和右边的字要做到垂直居中
是多么的困难,而flex只需要在#box里加上一句align-items:center;
就行,flex真香了,这个属性是最常用的,而flex还有大量的功能,下面粗略列出来,具体使用看具体情况
#aa{
/* flex的排列方向: 横向(默认), 横向反方向 , 纵向 , 纵向反方向 */
flex-direction: row(default) | row-reverse | column | column-reverse;
/* 横向使用时,当容器中的项目一行放不下的时候,是挤一挤还是换行,横向使用 */
flex-wrap: nowrap(default) | wrap;
/* 横向排列并且有空余位置时排列方式是,从左边开始 , 右边开始 , 中间 , 两端对齐 , 间隔等分 */
justify-content: flex-start(default) | flex-end | center | space-between | space-around;
/* 横向排列并且开启不换行nowrap时, 当同行的div高度不一样怎么排列Y轴, 一般是用center */
align-items: flex-start(default) | flex-end | center | baseline;
/* 横向排列并且开启换行wrap时, 换行的规则是,换行后Y轴怎么排列,常用是center和space-around */
align-content: flex-start(default) | flex-end | center | space-between | space-around;
}
原文地址:https://www.cnblogs.com/pengdt/p/12037507.html
时间: 2024-11-01 04:00:50