父级属性
display:flex
- flex有两个轴向的排列方式，x轴和y轴，默认主轴x轴
- 设置了flex属性，子级将默认已X轴排列
-
flex-direciton 设置主轴排列方式
属性
row
- 默认值 X轴，排列方式为自左向右对其
- row-reverse
- 设置主轴为X轴，排列方式为自右向左对其
- column
- 设置主轴方向为Y轴，排列方式为自上向下对其
column-reverse
nowrap ——默认值
- 内容超出不换行
- wrap
- 设置内容超出换行
wrap-reverse
flex-start —-默认值
- 于主轴开始位置对其
- flex-end
- 于主轴结尾位置对其
- center
- 于主轴居中位置对其
- space-between
- 于主轴位置平均分布位置
- 示例，如果盒子有三个子元素，三个子元素平均分布父元素位置
- 两侧边固定，中间自适应
space-around
-
属性
flex-start
- 于交叉轴开始位置对其
- flex-end
- 于交叉轴结尾位置对其
- center
- 于交叉轴居中位置对其
- baseline
- 基于文字底线对其
stretch —— 默认值
-
设置单行水平垂直居中
displya: flex
- align-items: center
-
设置多行水平垂直居中
displya: flex
- justiry-content：center
- align-content: center
-
子级属性
order 排列权重
类似于z-index
- 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
-
align-self子级交叉轴排列方式
如果父级设置了align-items，子级设置了align-self那么会遵循子级的设置
如果父级设置了align-content，子级设置了align-self那么会遵循父级的设置
属性
auto —-默认值
- 如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
- flex-start
- 于交叉轴开始位置对其
- flex-end
- 于交叉轴结尾位置对其
- center
- 于交叉轴居中位置对其
- baseline
- 基于文字底线对其
stretch
默认值为0
给子元素设置了flex-grow：1或者更大的数字，那么这个子元素会占据父元素剩余空间，gorw设置的越大，谁就占据的越多
flex-shrink缩小比例空间
元素的收缩比例—多出盒子的部分，按照比例的大小砍掉相应的大小，即比例越大，被砍的越大
- 默认值1
- 如果没有手动设置 flex-shrink，则系统默认分配给每个子元素
示例
项目占据主轴的空间该属性设置元素的宽度或高度，当然width也可以用来设置元素宽度
- 如果元素上同时出现了width 和flex-basis那么flex-basis会覆盖width的值
- 子元素宽度尽可能按照basis来如果基准值相加大于容器宽度
- 根据主轴的位置进行设置元素占据空间
示例
-
中间固定，两侧不平均分
流式布局
-
圣杯布局
若有收获，就点个赞吧
0 人点赞
