和cool一起学前端----第十天

弹性布局-flex（part1）

flex布局，因为是css3提出的，在移动端表现比较好，因为移动设备更新太快了，所以对css3支持比较友好，所以在移动端布局的时候，建议大家用这种布局方式，会少写很多代码的，接下来和cool一起学习flex布局吧。
首先需要给出一个容器，然后给容器设置为flex，来看下代码

首先写一个class为container得容器，我们写上容器得样式为display:flex，如上图所示，那这个容器就是一个弹性容器了，一个页面由多个这样得弹性容器成，该弹性容器的子元素的float,vertical属性均会失效，就算你设置了也没有效果。
好，接下来，就要看下这个弹性容器的几个重要的属性

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
  我们依次来解释一下，首先是flex-direction,这个指的是子元素的排列方向，默认值是row,还有column,row-reverse,column-reverse;
  我们依次给container容器的flex-direction设置为不同的值看下效果
  
  
  
  
  同理设置为column-reverse自然是从下往上排列了。
  再来看第二个属性值，flex-wrap,这个指的是当子元素内容过多的时候，能不能换行显示，默认值是nowrap,设置为wrap就是可以换行显示
  
  再来看justify-content属性，这个的默认值就是flex-start，几个常用的如下，flex-end,space-between,space-evenly,space-around,center等，
  
  
  还有其他的几个值，可以去实验学习下，我这边也就不截图了，都还比较容易理解，就是用起来的时候，你要去判断该怎么用，用哪种排列方式，这个还是需要一定时间去积累的。
  再看align-items属性，这个默认值是stretch,这个得说一下，我定义了container容器得高度为300px
  
  
  如果使用默认值，且子元素不定义宽高得话，子元素就会被拉伸的和container容器一样高，
  我将box样式注释且设置container容器得align-items:stretch(默认值就是这个，不设置也没问题)
  
  
  那如果子元素定义了宽高，还是以子元素得宽高来。
  当align-items:center,可以让子元素垂直居中，这个很有效果，用我们之前得样式是不好实现垂直居中得，我们来试下，
  
  还有其他的几个值我就不过多得演示了，最后再说下align-content属性，这个是针对一整行的元素的排列的，（如果设置flex-direction:column,那就是一整列），默认值也是stretch。
  说实在的，当你做了很长时间的移动端的开发，你会发现移动端的布局都是比较简单的，可能你都不会用上align-content属性，我觉得刚开始说多了可能就晕了，一会这样排，一会那样排列，其实你要多试试，多敲几次，你就会明白了，听别人说终究是别人的，只有自己勤动手，才有一种恍然大明白的感觉，当然有问题的还是可以给我留言的，大家也可以去看阮一峰的flex介绍，那边说的就很详细，但是初学者可能就会有点晕了，关于父容器的属性就到这边了，明天我会和大家分享子元素的一些重要属性。