美文网首页
css 的弹性布局

css 的弹性布局

作者: 51bitquant | 来源:发表于2020-05-07 18:43 被阅读0次

flutter 的Column, Row 布局基本跟CSS 的 flex布局很类似,只是flutter单独抽取成Row, Column:

容器上的属性:

  1. flex-direction : row | column
  2. flex-wrap : nowrap | wrap | wrap-reverse
  3. flex-flow : <flex-direction> || <flex-wrap>
  4. justify-content : justify-content: 主轴的对其方式: flex-start, flex-end, center, space-between, space-around
  5. align-items: align-items: flex-start, flex-end, center, baseline, stretch.
  6. align-content:

Item的属性:

  1. order: order 属性定义项目的排列顺序, 数值越小,排列越靠前, 默认值为0.
  2. flex-grow: 属性定义项目的放大比例, 默认值为0, 即如果剩余空间,也不放大。
  3. flex-shrink:flex-shrink: 属性定义了项目的缩小比例, 默认为1, 如果空间不足,该项目即将缩小.
  4. flex-basis: 属性定义了分配多余空间之前,项目占据的主轴空间(main size).。 浏览器根据这个属性,计算
    主轴是否有多余的空间,它的默认值为auto, 即项目本来的大小.
  5. flex: 属性是flex-grow, flex-shrink, flex-basis. // flex: none | [flex-grow, flex-shrink, flex-basis]
  6. align-self : 属性允许单个项目有与其他项目不一样的对其方式, 可以覆盖align-items 属性, 默认值为auto,
    表示集成元素的align-items 属性,如果没有父元素,则等同于stretch.

相关文章

网友评论

      本文标题:css 的弹性布局

      本文链接:https://www.haomeiwen.com/subject/cthzghtx.html