CSS中弹性盒子flex的属性说明

flex 使用说明

1. flex 可以理解成一个盒子元素, 它下面的子元素就是 flex 项目, 可以用 flex 相关属性来操作它.
2. 把普通元素变成 flex 盒子元素: 给元素加属性 display:flex, 加了后就变成一个 flex 盒子.
3. 元素变成 flex 盒子后, 里面的子元素都变成”行内块”元素, 这些子元素叫 flex 项目, flex 的相关属性只对之些子元素有效.
4. flex 盒子可以嵌套.

flex 的排列和对齐,flex 盒子有主轴概念, 默认是从左到右

1. flex 项目横排
   flex-flow:row nowrap; 不让换行
   flex-flow:row wrap; 可以换行
2. flex 项目垂直排
   flex-flow:column nowrap; 不换行
   flex-flow:column wrap; 可以换行
3. flex 项目对齐
   对齐前提是在主轴上有剩余空间
   • 视为一个整体对齐
     jsutify-content:flex-start 开始位置,默认的
     jsutify-content:flex-end 结束位置
     jsutify-content:flex-center 距中对齐
   • 视为独立个体
     justify-content:space-between 两端对齐
     justify-content:space-between 分散对齐
     justify-content:space-between 平均对齐
4. flex 项目在交叉轴的对齐
   aling-items:stretch 拉伸
   aling-items:flex-start 开始位置
   aling-items:stretch:flex-end 结束
   aling-items:centen 距中
5. flex 多行项目在交叉轴上的对齐
   align-content:stretch 充满交叉轴, 就是上下充满,上下没有空间
   align-content:flex-start 开始位置,就是靠上对齐,多余空间在下方
   align-content:flex-end 结束位置,靠下,多余空间在上方
   align-content:center 上下距中,上下会留出多余空间
   align-content:space-between 两端对齐
   align-content:space-around 分散对齐 项目上下边外距相等,但项目间距是 2 倍
   align-content:space-evenly 平均分配上下空间
6. 项目属性 flex, 通常用来设置单个项目
   flex:flex-grow flex-shrink flex-basis
   三个值的意思分别为
   • 放大因子
   • 收缩因子
   • 项目在主轴上的基准宽度
     示例:
     flex:1 1 auto; 开启放大,收缩,基准宽度是自动,也可以设置成单值 auto
     flex:1 1 80%; 意思为开启放大收缩, 占宽度 80%
     flex:0 0 auto; 不放大,不收缩,可以设置单值 none
     flex:1; 单值意为放大因子