flex布局

无标签
发布日期:   2024-08-17

六个大属性

  • flex-direction 决定主轴位置，横着来还是竖着来
  • flex-wrap 决定怎么排列，能不能换行
  • flex-flow 就是上面两个的简写方式 row nowrap默认值
  • justify-content 项目在主轴的对齐方式
1
2
3
4
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
// 前面 后面 中间 两边贴着等间距 两边不贴着等间距
  • align-items 交叉轴上的对齐，类似手风琴吧，适合高度不一样的中间内容对齐
  • align-conten 多根轴线的对齐，适合多内容

flex-grow 设置为1，表示该项可以在父容器内扩展，占据所有可用的额外空间。

子盒子里面

  • order 数值越小越往前，弄排序
  • flex-grow 看放大比例
  • flex-shrink 弄缩小比例 可弄一边固定另一边不缩小
  • flex-basis 计算占多余空间
  • flex 前三个的缩写
  • align-self 抽象，覆盖
文章作者: 悠然寂夏
文章链接: https://charlotte21110.github.io/2024/08/17/see-you-again/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 悠然寂夏 !
无标签
赏
评论
评论
评论
  目录