微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

flex布局

flex布局(Flexible布局, 弹性布局)

 重要概念:

  1. 开启flex布局的元素叫做  flex container
  2. flex container 里面的直接子元素叫做  flex items

如何开启flex布局:?

设置display属性为flex或者inline-flex 可以成为flex container

  1. display: flex    块级元素, flex container 以block-level形式存在
  2. display: inline-flex   行内元素  , flex container 以inline-level形式存在

flex布局模型:

main axis 主轴

cross  axis 交叉轴

 

 

flex相关属性

应用在flex container 上的CSS属性

  1. flex-flow
  2. flew-direction
  3. flex-wrap
  4. justify-items
  5. align-contaent

应用在flex items 上的CSS属性

  1. flex
  2. flex-grow
  3. flex-basis
  4. flex-shrink
  5. order
  6. align-self

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐