做网站业务员,网站建设模板登录界面,仿淘宝网站源码 php,全球访问量最大的10个网站CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox )#xff0c;是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时#xff0c;元素是可预测地运行。
基本概念
容器#xff1a;使用 display:flex 或 display:inline-flex 声明的…CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox )是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时元素是可预测地运行。
基本概念
容器使用 display:flex 或 display:inline-flex 声明的元素称为 Flex 容器flex container简称 容器项目容器 中所有子元素自动成为容器成员称为 Flex 项目flex item简称 项目主轴项目沿其一次排列的轴被称为 主轴。侧轴垂直于主轴的轴被称为 侧轴。
容器的属性
flex-direction 定义了 主轴 的方向 row主轴为水平方向起点在左端默认row-reverse主轴为水平方向起点在右端column主轴为垂直方向起点在上沿column-reverse主轴为垂直方向起点在下沿 flex-wrap 默认情况所有项目会在一行显示如需换行使用 flex-wrap nowrap不换行默认wrap换行第一行在上方wrap-reverse换行第一行在下方 flex-flow 该属性是 flex-direction 和 flex-wrap 的简写默认值为 row nowrap水平排列不换行。 justify-content 定义了项目沿着 主轴线 的对齐方式 flex-start: 项目左对齐默认flex-end: 项目右对齐center: 项目居中对齐space-between: 项目两端对齐容器首尾不留距离项目之间的间隔都相等space-around: 项目两端对齐容器首尾留有距离 align-items适用于不换行的情况 定义了项目所在 侧轴线 的对齐方式 flex-start: 侧轴 起点对齐如果 flex-direction:row则项目顶部对齐flex-end: 侧轴 终点对齐如果 flex-direction:row则项目尾部对齐center: 项目居中对齐baseline: 项目的 第一行文字的基线 对齐stretch: 如果项目 未设置高度 或者 设为auto拉伸与容器同高默认 align-content多行情况时适用 定义了项目所在侧轴线的对齐方式 flex-start: 侧轴 起点对齐flex-end: 侧轴 终点对齐center: 侧轴 居中对齐space-between: 两端对齐容器首尾不留距离space-around: 两端对齐容器首尾留有距离stretch: 如果项目 未设置高度 或者 设为auto拉伸与容器同高默认
项目属性
order项目的排列顺序 数值越小排列越靠前可以为负值 order:0保持项目原来的位置默认 flex-grow扩大定义项目的放大比例 默认为0如果容器存在剩余空间保持原大小不放大项目 flex-grow 属性都为 1项目平均分配剩余空间某个项目 flex-grow 属性为 2其他项目都为 1那么为 2 的项目宽度为 1 的 2 倍 flex-shrink缩小定义项目的缩小比例 默认为1如果容器空间不足项目缩小项目 flex-shrink 属性都为 1当容器空间不足时所有项目等比缩小某个项目 flex-shrink 属性为 0其他项目都为 1当容器空间不足时为 0 的项目不缩小 flex-basis分配多余空间之前项目占据主轴空间的大小相当于为项目设置宽度 默认值auto保持项目的本来大小不作任何宽度改变可以定义项目的宽度如200px也可以设置 flex-basis:10%将占据空间的10% flex常用flex-grow flex-shrink flex-basis 的缩写 默认值0 1 auto不放大但缩小auto1 1 auto等分放大缩小none0 0 auto不放大不缩小flex:1 相当于只设置了 flex-grow align-self定义项目在侧轴的对齐方式。该属性可覆盖 align-items 属性。 允许单个项目与其他项目不一样的对齐方式可覆盖 align-items 属性。默认值为 auto表示继承父元素的 align-items 属性如果没有父元素则等同于 stretchflex-start | flex-end | center | baseline | stretch 与 align-items 属性完全一致 flex布局小案例
