元素居中之Flex布局

Posted 2020-08-28 leaf930814

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

对于这个问题，方法多种多样，之前也有对这个问题进行总结过，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

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

。

。

。

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