【Day13】CSS弹性盒

学习内容

• 怪异盒模型
• 弹性盒子
• 容器属性
• 项目属性
• C3多列属性

怪异盒模型

盒模型大小计算: box-sizing 用来设置盒子占据页面的实际宽高
content-box 标准盒模型 (默认值)
盒子占据页面的实际宽高=padding+border+content (width和height)
border-box: 怪异盒模型
盒子占据页面的实际宽高=content (width和height)
为了让内边距和边框不影响盒子的实际宽高

弹性盒子

弹性盒子: 一种布局方式
容器  项目

主轴: 元素默认排列方向
侧轴: 元素默认排列相反方向
可以改变

x轴: 水平方向
y轴: 垂直方向

定义弹性盒子
display: flex;

容器属性

容器属性
flex-direction: 设置弹性盒子项目的排列方向 (主轴排列方式)
属性值: row横向排列 (默认值)
       column 纵向排列
       row-reverse 反转横向排列
       column-reverse 反转纵向排列
justify-content: 主轴对齐方式
属性值: center居中对齐
       flex-start 顶端对齐
       flex-end 末端对齐
       space-around 自动分配距离
       space-between 两端对齐
align-items: 侧轴对齐方式
属性值: center 居中对齐
       flex-start 顶端对齐 (默认)
       flex-end 末端对齐
       baseline 基线对齐 效果跟flex-start类似，实际开发中少见

flex-wrap: 设置项目换行
属性值: nowrap 不换行 (项目的宽度超出容器的宽度)
       wrap 换行
       wrap-reverse 反转换行

align-content 换行之后行与行的对齐方式
属性值:center 居中 (没有间距)
      flex-start 顶端对齐(没有间距)
      flex-end 底部对齐 (没有间距)
      space- around 自动分配距离
      space-between 两端对齐
      stretch 自动拉伸以适应容器高度 (默认值)

项目属性

align-self: 单独设置某个项目的对齐方式 (主轴侧轴同时生效)
属性值: center 项目位于容器的中心
       flex-start 项目位于容器的开头
       flex-end 项目位于容器的结尾
       auto 继承容器的对齐方式
       stretch 自动拉伸适应容器
order: 设置项目排序的优先级
属性值: 数值 默认为0，可以为负值
数值越大越往后排
flex: 设置项目如何分配空间
flex-shrink: 0 让宽高不被压缩
flex-grow: 设置项目扩展的量
flex-basis: 设置项目的长度 = 宽度

C3多列属性

c3多列属性
column-count: 数值属性规定元素应该被分隔的列数
column-gap: 数值+单位 列与列之间的距离
column-rule: 列边框 与边框属性类似
column-span: 合并列 none 不合并 all 合并
column-fill: 用来检索列高 auto (某一列内容撑满高度，再换到下一列显示) balance (均分)
column-width: 列宽 (最好别与column-count混用)