内减模式 box-sizing: border-box;
1 元素的宽度 == 在css中的写的width的值 (不再受border和padding影响)
2 盒子模型 = border + padding + 内容块
50% = border增大 + padding不变 + 内容块减小
flex 布局 = 伸缩布局 = 伸缩盒子=弹性布局=弹性盒子
1 把哪个元素变成 伸缩盒子 就在这个元素上加一行代码 display: flex;
2 display: flex; 不会对该盒子产生 其他的布局影响
1 margin
2 定位
3 浮动
元素加上 display: flex; 布局效果 和 不加这一行代码是一样的!!!
3 父项 子项
谁身上 有 display: flex; 谁 就是 父项
父项里面的 子元素 就成 子项
4 子项
1 就已经不存在 以前的 块级 和 行内 或者 行内块的概念 统一都可以直接加入 宽度和高度
2 子项不加宽度和高度的时候 宽度和高度的 默认值是怎么样
子项 宽度 = 内容撑开
子项 高度 = 父项的高度
3 子项
1 margin 有效果
2 定位 有效果
3 浮动 没有效果
4 布局的时候 子项 虽然说定位和 margin是有效果 但是一般不用!!!
假如 你都要使用定位或者maring 就表示 你 没有必要使用flex布局
设置主轴方向
flex-direction:
1 row x轴的正方向 左到右 常用
2 row-reverse 从右到左
3 column y轴正方向 上到下 常用
4 column-reverse 从下到上
设置父项 子项的对齐方式
justify-content:
1 flex-start; 左对齐
2 flex-end 右对齐
3 center 水平居中
4 space-between 先两边放置 然后再平分空白区间
5 space-around 平分空白区间
设置侧轴的子项对齐方式
align-items:
1 flex-start 上对齐
2 flex-end 下对齐
3 center 居中对齐
父项的换行属性 flex-wrap: wrap;
侧轴子项对齐方式 多行
align-content
flex-start 上对齐
flex-end; 下对齐
center 居中
space-between 先上下 再平分空间
space-around 平分空间
子项 设置自己在侧轴上的对齐方式 align-self: center; flex-start flex-end center
设置子项的排列顺序 在主轴上
order:0;
1 默认值 都是 0
2 值越小 越靠前
设置子项 占父项的宽度的份数 比例 flex: 2; 子项的flex不会和父项的换行属性一起出现