主轴:x轴方向,水平向右(行)
侧轴:y轴方向,水平向下(列)
flex-shrink:0 固定大小
1.父项
设置flex
display:flex;
主轴的方向
flex-direction:
row(左到右)
row-reverse(右到左)
column(上到下)
column-reverse(下到上)
主轴的子项的对齐方式
justify-content:
flex-start 左对齐
flex-end 右对齐
center 居中
space-between先两边,在平分
space-around 空白环绕
换行
felx-wrap
wrap(换行)
nowrap(默认,不换行)
侧轴的子项的对齐方式(多行)
align-content
flex-start(上)
flex-end(下)
center(中)
space-around(空白环绕)
space-between先两边,在平分
侧轴的子项的对齐方式(单行)
align-items
flex-start(上)
flex-end(下)
center(中)
2.子项
宽默认内容决定,高默认父盒子的高
默认父项设置拉伸align-item:stertch/flex-start;
设置子项占父项的宽度的份数
flex:1;
子项自己在侧轴的对齐的方式
align-self:
flex-start(上)
flex-end(下)
center(中)
设置子项排列顺序
order:数字;
3.实现瀑布流布局
1.在父项
column-count: 2; 表示有两列
2.在子项
break-inside: avoid; 表示不分割
其他
1.父项变成伸缩盒子之后 不会对布局有影响
2.子项可以设置宽高
3.子项加浮动没有效果
4.子项加定位是有效果的
5.主轴的方向
水平 高度默认和父元素一样高,宽由内容来撑开(控制宽度,宽度可变)
垂直 宽度默认和父元素一样宽,高度由内容来撑开(控制高度,高度可变)
