Flexbox深入浅出系列之实战演示(6)-原创手记-慕课网

水平垂直居中

在之前我们想实现完美居中通过浮动实现还是比较麻烦的，但是有了flexbox之后，这个问题迎刃而解了。

<div class="parent">
  <div class="child">KING</div>
</div>

HTML结构比较简单，就只有父元素和子元素，想让子元素在水平垂直都居中，不论父元素多宽多高，子元素多宽多高，都可以水平垂直居中，我们就可以使用flexbox来实现。

.parent{
   border:1px solid red;
   height:500px;
   display:flex;
}
.child{
  width: 100px;
  height: 100px;
  border:1px solid blue;
  margin:auto;
  line-height: 100px;
  text-align: center;
}

首先设置父元素和子元素的简单样式，这些比较简单，没什么可说的，接着设置父元素为flex容器，接着child为flex容器的子项目。

那接着想让子元素在水平垂直都居中，我们可以使用margin属性设置为auto，这样就会让子项目自动分配Flex容器额外空间，就轻松实现了，自己去试验下吧~~~

接着我们也可以试验下另外一种方式，设置Flex容器的属性，让其flex项目在容器中水平和垂直如何对齐。可以通过设置justify-content: center 使其水平方向居中，接着设置align-items:center设置垂直方向居中，同样也可以实现，这样就不用再设置.child的margin属性为auto了。快来试试吧，看看你们还有其他更好的方式吗？如果有也可以告诉我哟~~~

案例：垂直居中1

拓展：CSS居中解决方案及工具

可以通过HOW TO CENTER IN CSS上提供的解决方案，看下各种形式的居中解决方案，有兴趣的同学可以研究下,而且可以兼容IE的不同版本哦~~~

水平列表

现在有这样一个需求，有六个固定尺寸的列表，我们希望它均匀的分布在容器中，当我们调整窗口大小的时候，同样显示的很好，再不使用媒体查询的情况下。我们可以看下例子：

当我们在小屏幕上的时候显示为1列，居中。

当在调整屏幕的时候，可以看到列表会根据屏幕尺寸平均分配。

案例：flex-item

flex nav

接着我们在配合响应式布局玩一些有意思的东西，做一个更酷的导航。默认导航水平显示，导航选项靠右，当屏幕<=800px的时候，可以让导航选项平均分布在水平线上，当屏幕<=500px的时候，我们可以让其在单列显示，相当于在小屏幕上来显示。

案例：flex-nav

注意：这里我们鼠标悬浮在链接上的时候设置了背景色变暗， darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；对应的还有 lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；

三列布局的实现

这次我们通过flexbox做一个比较传统的布局，在大屏幕下是三列布局，在小屏幕下变成单列显示，秉着移动优先的原则。

实现思路：

先去掉默认块元素的margin和padding
设置container为flex容器，通过display:flex，并且设置子元素在容器中的排列方式，水平换行。
设置flex容器内的所有子项目的flex属性为1 100%,作用是占用剩余空间和等比压缩,默认大小为100%，其它简单修饰属性就不用说了，至此就已经实现了4行水平排列的布局
让布局在>=600px的时候成header+content+(aside-1+aside-2)+footer的形式，此时使用媒体查询，接着设置aside的flex为1 auto，设置为1让其各占一半，flex-basis为auto，则其宽度则随flex-grow值来做分布。
接着在屏幕>=800px的时候，改变其顺序，通过order属性来实现，并且设置content+aside-1+aside-2在一行上显示，并且content占用的空间是其他两个的3倍。

案例：flexbox网页布局

Flexbox深入浅出系列之实战演示(6)原创