flex 布局与传统布局

传统布局兼容性好, 但是布局繁琐, 且不适合移动端
flex布局更方便, 更适用移动端. 但是pc端兼容性较差, ie11版本以下不支持或仅部分支持
如果pc页面, 应避免适用flex, 如果移动端, 建议使用flex

flex原理

采用flex布局的元素, 称为flex容器, 他的所有子元素会自动变成 该flex容器的成员. 称为flex项目
原理: 通过给父容器添加 display: flex; flex属性, 来控制子元素的位置和排列方式

常见 父控件属性

1. flex-direction: 设置主轴方向(排列方向) 
        row:主轴为x轴,侧轴为y轴  column:主轴为y轴,侧轴为x轴
            flex-direction: row;              x轴排列  (默认值)
            flex-direction: row-reverse;      x轴排列 反向
            flex-direction: column;           y轴排列
            flex-direction: column-reverse;   y轴排列 反向

2. flex-wrap:  子元素是否换行 
            flex-wrap: nowrap;  不换行, 子元素显示不下,会缩小子元素  (默认值)
            flex-wrap: wrap;    换行

3. justify-content:  设置 主轴 上的子元素的对齐方式 
            justify-content: flex-start;    主轴起始位置开始排列 (x:水平向左 y:垂直顶部) (默认值)
            justify-content: flex-end;      主轴末尾位置开始排列 (x:水平向右 y:垂直底部)
            justify-content: center;        主轴居中排列  (x:水平居中 y:垂直居中)
            justify-content: space-around;  平分剩余空间
            justify-content: space-between; 平分剩余空间,但两边贴边
       

4. align-items: 设置 侧轴 上的子元素的对齐方式  (lex-wrap: nowrap; 有效)
            align-items: flex-start;  (默认值)
            align-items: flex-end;
            align-items: center;
            align-items: stretch;   拉伸 
                设置此属性,侧轴方向的宽或高不设置(y轴为侧轴则是高,x轴为侧轴则是宽),此时会自动拉伸填充满整个父控件的侧轴

5. align-content:  设置 侧轴 上的子元素的对齐方式  (lex-wrap: wrap; 有效)
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-around;
            align-content: space-between; 
            align-content: stretch;
            
6. flex-flow: 可以将flex-direction: 和 flex-wrap: 合并简写, 如下:
            flex-flow: column wrap;  

        总结:
            flex-direction 设置主轴,默认值是row,此时主轴为x轴, 侧轴为y轴. 设置为column,此时主轴为y轴, 侧轴为x轴.
            flex-wrap 设置是否换行, 默认(nowrap)不换行, 多于一行时子元素主轴方向缩小. 设置为wrap自动换行. 主轴方向排列, 侧轴方向换行
            justify-content 设置 主轴方向的对齐方式
            align-items 设置 不换行 情况下的 侧轴方向的对齐方式
            align-content 设置 换行 情况下的 侧轴方向的对齐方式

            align-items属性和align-content都有 stretch值, 设置此值,侧轴方向的宽或高应不设置(y轴为侧轴则是高,x轴为侧轴则是宽),此时会自动拉伸填充满整个父控件的侧轴.(如设置了侧轴对应的宽高, 则此属性不再起作用)

常见 子项属性

1. flex  定义子项目剩余分配空间, 用来表示占据到少分数 
           flex: 1; 占1分 (总分数是容器中所有子项目的总分数)
           flex: 20% 占父容器主轴的20% 

2. align-self: 允许对单个子项应用 与其他子项不同的对齐方式, 可覆盖父控件设置的align-items属性
            默认值为auto, 表示继承父控件的align-items属性, 如果没有父控件, 则等于stretch值
     

3. order 定义项目的排列顺序
            数值越小, 排列越靠前, 默认值为0, 可以设置负数