您的位置:首页 - 教程 - CSS - 正文
元素居中之Flex布局

 在做页面布局的时候,多多少少都会遇到这个话题,如何使子元素居中于父元素中???

对于这个问题,方法多种多样,之前也有对这个问题进行总结过,answer应该不少于10种吧。至于使用哪种方法比较好,我觉得这很大程度看个人喜好。

我经常使用的最多也就是一下几种:(以最简单的结构举例,元素宽高略 )

<div class='parent'>
    <div class=''child></div> 
</div>  

 

1、定位

.parent{
  position:relative;  
}
.child{
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto;
}

2、定位+transform

.parent{
  position:relative;  
}
.child{
   position:absolute;
   top:50%;
   right:50%;
   transform:translate(-50%,-50%);
}

3、height +line-height

.parent{
  height: 100px; 
}
.child{
  line-height: 100px;
}

4、table

.parent{
    display: table-cell;
    vertical-align: middle;
}
.child{
    margin:auto;
}

。。。。

以上方法其实已经足够应付日常中如何使元素居中这个问题,but,早前听说过有一种新布局,可以更加优雅的解决这个问题,那就是flex布局。

其实flex布局已经不是什么新鲜的事物了,早在2009年,W3C就提出了一种新方案,但是由于各种浏览器兼容性的问题,这种方案一直没有推广开来。记得很在早前就有使用过一个叫swiper的移动端插件,看了其中的源代码,发现它里面就使用了flex布局,草草看了一下,也知道大概意思,但是之后的项目一直没有机会使用,我也就没有再关注过。前端时间去看看这种方案的兼容性,95%以上已经完美支持这种解决方案了。so。。。可以大胆的使用了。

flex布局也叫弹性布局,相比传统的布局以及bootstrap的栅格布局,flex布局显得更加的灵活,代码写起来也更加的优雅。

直接插入主题,怎么使用flex使元素居中?

首先先明确基本概念:任何的容器都可以指定flex布局,容器里面的子元素自动成为容器的成员,也叫项目,flex item

.parent{
    display: flex;
    display: -webkit-flex; 
    justify-content:center;
    align-items:center;
}  

简单几行,就可以使子元素完全居中于父元素中了。。。

接下来,再看看flex布局的其他使用情况。

我们可以把弹性布局想成一个可以朝四个方向拉伸的盒子。

容器元素有六个属性,分别是:

flex-direction  

决定项目元素的排列方向,一般有四个值

 row(默认值,主轴为水平方向,起点是左端,其他见名知意) | row-reverse | column | column-reverse;

flex-wrap 

决定项目元素都在一条线上,一般有三个取值

nowrap(默认值,不换行) | wrap | wrap-reverse;

flex-flow

flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

justify-content

定义了项目在主轴上的对齐方式。

flex-start (默认值):左对齐| flex-end | center | space-between | space-around;

align-items

定义项目在交叉轴上如何对齐。

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

对于这类的学习,平时用到的时候,再去查对应的属性应用就可以了,更重要的是在学习一项新的东西之后,慢慢加入自己的体会,没在实践中去总结。


评论: