2021-11-06 felx布局

一、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    两侧和盒子之间间距都相等

3.侧轴对其方式

属性值：align-items：

值：

• flex-start   起点开始依次排列（默认值）
• flex-end   终点开始依次排列
• center    沿侧轴居中排列
• stretch    弹性盒子沿着侧轴线被拉伸至铺满容器（默认值     弹性盒子不设高度的时候才会被拉伸）

单独控制一个弹性盒子需要给要设置的盒子添加align-self到该盒子的样式中。

4.伸缩比

目标：使用flex属性修改弹性盒子伸缩比。

属性：flex：1    （ 1 在这里表示父元素剩余尺寸中占一份）

5.修改主轴方向

属性：flex-direction（改变元素排版方向）

值：

• row   行，水平（默认值）
• column   列，垂直  （常用）
• row-reverse    行，从右向左
• column-reverse   列，从下向上

6.弹性盒子的换行与行对齐方式

（1）换行

属性：flex-wrap（实现弹性盒子多行排列）

值：

• wrap 换行
• nowrap   不换行（默认值）

（2）行对齐方式

  属性： align-content （加在父元素身上）

取值与justify-conten一致

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。