码迷,mamicode.com
首页 > 其他好文 > 详细

真香的flex弹性布局

时间:2019-12-13 23:59:39      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:round   div   项目   元素   css   rev   tar   str   justify   

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

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

真香的flex弹性布局

标签:round   div   项目   元素   css   rev   tar   str   justify   

原文地址:https://www.cnblogs.com/pengdt/p/12037507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!