CSS3—flex布局

• Flex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局。
• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
• Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex 布局。

目录

Flex布局父项常见属性

flex-direction

justify-content

flex-wrap

align-items

align-content

flex-flow

Flex布局子项常见属性

flex

align-self

order

---

Flex布局父项常见属性

flex-direction

Flex 布局中默认的主轴是 row，x轴；如果想改变主轴方向可通过设置 flex-direction 来改变

• flex-direction : column;                         将主轴改为y轴，纵轴
• flex-direction : row;                               将主轴改为x轴，横轴
• flex-direction : row- reverse;                主轴为x轴，并且翻转
• flex-direction : column- reverse;          主轴为y轴，并且翻转

justify-content

通过 justify-content 能够设置主轴子元素排列形式

• justify-content : flex-start;                   所有子元素在主轴头部显示
• justify-content : flex-end;                    所有子元素在主轴尾部显示
• justify-content : center;                所有子元素在主轴居中对齐
• justify-content : space-around;           所有子元素平分剩余空间
• justify-content : space-between;        所有子元素先两边贴边在平分剩余空间

flex-wrap

开启 flex 布局后默认为不换行（如果子元素超出父元素的容器会压缩子元素的大小）

• 如果想要换行效果设置 flex-wrap：wrap;

align-items

利用 align-items 能够设置侧轴元素对齐的方式在子项为单项（单行） 的时候使用

• align-items : flex-start;        表示从头开始
• align-items : flex-end;         表示从结尾开始
• align-items : center;            表示居中显示
• align-items : stretch;           会将子元素拉伸

align-content

align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值

• align-content : flex-start;                   默认值，在侧轴的头部开始排列
• align-content : flex-end;                    在侧轴的尾部开始排列
• align-content : center;                       在侧轴中间显示
• align-content : space-around;           子项在侧轴平分剩余空间
• align-content : space-between;        子项在侧轴先分布在两头，再平分剩余空间
• align-content : stretch;                      设置子项元素高度平分父元素高度

align-item和align-content的区别

• 单行找 align-items
• 多行找 align-content

flex-flow

flex-flow就是flex-direction和flex-wrap的合写

• flex-flow : row wrap;

Flex布局子项常见属性

• Flex 用来设置分配剩余空间的比列的
• 剩余空间是指父盒子的宽度减去没有设置 flex 的盒子的宽度
• 在将剩余空间按占比分配给各个子盒子
• 比列计算：当前子盒子的 flex 数值/所有 flex 的总和

flex

.item {
    flex:<number>; /* default 0*/
}

align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

order

order 属性定义项目的排列顺序

• 数值越小，排列越靠前，默认值为0。

注：和 z-index 不一样。

div span:nth-child(2){
    /* 默认值是0，-1比0小所以在前面 */
    order: -1;   
}