说说弹性布局

弹性布局

弹性布局，是一种布局方式
主要解决某个元素中子元素的布局方式
它为布局提供了强大的灵活性

概念和语法

基本设置

display: flex;    // 将块级元素设置为容器
display: inline-flex    // 将行内元素设置为容器

这里出现了容器这个词，在弹性布局中有容器和项目的说法

容器：要发生 (设置) 弹性布局的子元素，的 ** 父元素 ** 称为容器
项目：要做弹性布局的 ** 子元素们 **，称之为项目

弹性布局中也有主轴和交叉轴的概念

项目们排列方向的一条轴(类似坐标轴中的 x、y 轴), 就称为主轴
和这条主轴垂直相交的轴，就称为交叉轴
默认主轴方向是横向排列，即主轴 -> x 轴

特点

当元素设置成弹性容器后，它的所有子元素变成弹性项目
此时项目的 float/clear/vertical-align 属性会失效

---

容器中的属性

1. 设置主轴方向

      flex-direction:
      取值：row，默认值，主轴是 x 轴，主轴起点是左端
      row-reverse,  主轴是 x 轴，主轴起点是右端
      column，主轴是 y 轴，主轴起点在顶部
      column-reverse, 主轴是 y 轴，主轴起点在底部
   

2. 设置项目的换行显示

      flex-wrap:
      取值：nowrap 默认值，空间不够时，也不换行，项目自动缩小
      wrap 空间不够就换行
      wrap-reverse 换行，并反转
   

3. 上面两项属性可以缩写成

      flex-flow:
      

4. 定义项目在主轴上的对齐方式

      justify-content:
      取值：flex-start, 默认值，以主轴起点对齐
      flex-end，以主轴终点对齐
      center  在主轴上居中对齐
      space-between 两端对齐，两端无空白
      space-around 每个间距大小相同，两边会留白
      

5. 定义项目在交叉轴上的对齐方式

      align-items:
      取值：flex-start 交叉轴起点对齐
      flex-end 交叉轴终点对齐
      center 交叉轴居中对齐
      baseline 交叉轴基线对齐，就是交叉轴起点
      stretch 前提，项目不写高。占满交叉轴上所有的空间
   

项目中的属性

只能设置在其中一个项目上，不会影响其他项目的效果

1. order

      定义项目排列顺序，值越小，越靠近起点，默认值为 0
      取值：无单位的整数

2. flex-grow

      定义项目的放大比例
      如果容器有足够大的剩余空间，项目将按比例放大
      取值：无单位整数，默认值 0，不放大

3. flex-shrink

      定义项目缩小的比例，容器空间不足时，项目该如何缩小
      取值：无单位整数，默认值为 1。取值为 0，不缩小。取值越大，缩小越快。

4. flex-basis

      主轴存在剩余空间时，分配给此项目多少空间，默认 auto 即本身宽度
      类似 height 和 width 写法

5. 以上三个属性可以缩写为

      flex:
      默认值是 0 1 auto
      常用写法 flex:1 -> 1 1 auto
      利用这个可以方便的实现 ** 圣杯布局 **
      转载一个自认为不错的实现方法[css 圣杯布局的实现][1]

1. align-self

     定义当前项目在交叉轴上的对齐方式
     这个属性会覆盖掉容器设置的 align-items 属性
     取值：flex-start 交叉轴起点对齐
     flex-end 交叉轴终点对齐
     center 交叉轴居中对齐
     baseline 交叉轴基线对齐，就是交叉轴起点
     stretch 前提，项目不写高。占满交叉轴上所有的空间
     auto 使用容器定义的 align-items 的值
     

以上就是我对弹性布局的一些知识点总结，如有异议，烦请告知，谢谢

不努力
就淘汰