CSS学习之flex 弹性布局

flex的轴向

  1. 主轴为mian axis,交叉轴为cross axis。在这里插入图片描述
  2. 左上角是起点
    在这里插入图片描述

flex的 6个容器属性

一、flex-direction 定义主轴方向

  1. row(默认水平)
  2. column(垂直)
  3. row-reverser(水平反向)
  4. column-reverse(垂直反向)

二、justify-content

  1. flex-start (默认主轴对齐)
    在这里插入图片描述

  2. flex-end (后对齐)
    在这里插入图片描述

  3. center (居中)
    在这里插入图片描述

  4. space-between (等距 首尾)
    在这里插入图片描述

  5. space-around (等距 两边)
    在这里插入图片描述

  6. space- evenly (等距 容器)
    在这里插入图片描述

三、align-items 定义子元素在交叉轴的前、后、居中的对齐方式

  1. flex-start
    在这里插入图片描述

  2. flex-end
    在这里插入图片描述

  3. center
    在这里插入图片描述

  4. baseline (文字基线)
    在这里插入图片描述

  5. stretch (拉伸)
    在这里插入图片描述

四、flex-wrap

默认为不换行

wrap (换行)

在这里插入图片描述

五、align-content

包括以下几种
在这里插入图片描述

六、项目属性

  1. order 根据其数值定义元素的排序。
    在这里插入图片描述
  2. align-self 允许项目自身有单独的交叉轴对齐方式
    可以设置自己的align-item,默认值auto继承容器属性。
    在这里插入图片描述
  3. flex 为三个属性的简写
    在这里插入图片描述
  1. flex-grow
    按容器剩余空间的比例方式元素填充容器。
    在这里插入图片描述
  2. flex-shrink
    按被挤压空间的比例缩小元素。
    在这里插入图片描述
  3. flex-basis
    元素初始大小,默认auto,根据主轴长度分配,在这里插入图片描述

在这里插入图片描述
简写和分开设置效果会不一致,建议简写,浏览器会自动计算相关数值。
在这里插入图片描述

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值