flex弹性盒子布局

flex弹性盒模型布局

mdn文档

使用传统的float position布局很繁琐，复杂的布局很难实现，flex布局现在很多的浏览器上都已支持，移动端布局十分方便。

1.png

设置弹性盒子

• 当确定某些元素需要弹性盒子模型布局，让他的父元素（容器）设置成display:flex
• 如果设置行类元素为flexbox 设置display:inline-flex

flex模型

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素（在本例中是 ``）被称之为 flex 容器（flex container）。
• 主轴方向 flex-direction设置主轴方向 column ,row, column-reserve ,row-reserve

换行

• 当在布局时定宽或者定高，但内容溢出，会使布局被破坏这个时候需要换行flex-wrap来换行

flex的动态尺寸

当flex如上设置，每个flexBox都是平分主轴上可用空间的大小通过设置flex:1 flex:2就会按比例计算每个占主轴的比例 flex:1 200px来设置flexBox的最小值，表示每flexBox元素先分配200px大小，剩余空间按照比例来分配

水平和垂直对齐

• align-items控制flexbox在交叉轴上的位置。默认stretch会在交叉轴上拉升，填满交叉轴方向。center会保持原来的大小，在交叉轴上居中，也可以设置flex-start ,flex-end来设置在交叉轴位置。
• 可以在flexBoxs上设置align-self上覆盖align-items的值。
• justify-content控制flex项在主轴上的位置flex-start移到主轴开始处，flex-end移到主轴结束处。center居中,space-around均匀分布在主轴,space-between和space-aroud相似，但是左右两侧不会有空间

flex项排序

在容器内的flexbox设置 order默认值为0越大越靠后，可以设置-1来排在前面。

flex嵌套

弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。