flex伸缩布局的相关使用

flex伸缩布局的相关使用

基本理解可以去菜鸟教程查看弹性盒子

首先我列出几种我常用的
1.上下左右居中的写法，（在父盒子里面写）

display:flex;
justify-content:center;
align-items:center;

2.控制到第几个元素的写法flex：权重，就是可以占到多宽

.main-column:nth-child(1) {
    flex: 3;
  }
  .main-column:nth-child(2) {
    flex: 4;
  }
  .main-column:nth-child(3) {
    flex: 3;
  }

3.还有后面9标注的一个自适应页面的用法

重点：父盒子里面一定要添加display：flex，这样弹性布局才可以启用
从右到左direction：rtl；

1.父容器flex-direction 主要控制子元素的排列方式：默认的子盒子们的排列是从左到右的

flex-direction: row | row-reverse | column | column-reverse

2.父容器justify-content 纵轴对齐的问题：这是水平方向处理子盒子排布最好用的属性

flex-start | flex-end | center | space-between | space-around

3.父容器align-items ，可以看作是居上还是居下：一定要注意这是纵向控制位置的。

align-items: flex-start | flex-end | center | baseline | stretch

4.父容器flex-wrap 设置是换行还是不换行

flex-wrap: nowrap | wrap | wrap-reverse |initial |inherit;

5.父容器align-content 类似于align-items，但是它是控制一行内的对其方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch
6．子元素属性
order: 为序号，值越小，排序越靠前
7.子元素margin 设置auto值上下左右自动居中（完美居中）：这是除了justify-content之外另一种居中方式，父盒子无需设置为display:flex,也可以在子盒子中添加给属性控制单个盒子的水平居中。

margin：0 auto；就是上下边距为零作用居中的意思

8.子元素align-self，描述弹性元素在纵轴方向上的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch

9.子属性flex ：感觉基本上使用的就是这种情况：如下图有父盒子里面有两个子盒子，我给右面的子盒子设置了大小，给左面的设置了flex=1，如果该父盒子是100%的宽，则随着窗口变化的时候，左面的盒子会不断缩小，有一种页面自适应的感觉了。

flex: auto | initial | none | inherit | [ flex-grow ] || [
flex-shrink ] || [ flex-basis ]

各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。