一、flex布局是什么
1.是一种浏览器提倡的布局模型。
2.布局网页更简单、灵活。
3.避免浮动脱标的问题。
二、使用步骤
1.给父元素设置display：flex
给父元素设置display：flex子元素可以自动的积压货拉伸。
所有弹性盒子都沿着主轴排列。
2.flex的组成部分：- 父元素=弹性容器
- 子元素=弹性盒子
- 主轴 （默认主轴在水平方向）
- 侧轴 / 交叉轴 （默认侧轴在垂直方向）
3.主轴对其方式
属性名：justify-content：
值：
- flex-start 默认值：以左为始点排列
- flex-end 以右为始点排列
- center 沿主轴居中排列
- spance-around 间距在子集的两侧，两侧相等（视觉效果中间是两侧的两倍）
- spance-between 间距在弹性盒子之间，盒子与容器之间没有间距
- spance-evenly 两侧和盒子之间间距都相等
属性值：align-items：
值：
- flex-start 起点开始依次排列（默认值）
- flex-end 终点开始依次排列
- center 沿侧轴居中排列
- stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（默认值 弹性盒子不设高度的时候才会被拉伸）
单独控制一个弹性盒子需要给要设置的盒子添加align-self到该盒子的样式中。
4.伸缩比目标：使用flex属性修改弹性盒子伸缩比。
属性：flex：1 （ 1 在这里表示父元素剩余尺寸中占一份）
5.修改主轴方向属性：flex-direction（改变元素排版方向）
值：
- row 行，水平（默认值）
- column 列，垂直 （常用）
- row-reverse 行，从右向左
- column-reverse 列，从下向上
（1）换行
属性：flex-wrap（实现弹性盒子多行排列）
值：
- wrap 换行
- nowrap 不换行（默认值）
（2）行对齐方式
属性： align-content （加在父元素身上）
取值与justify-conten一致
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
