真香的flex弹性布局

Posted 2021-03-23 pengdt

如何实现一个左中右的布局

在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;
}