flex布局 教程

原创 827538259 教程 CSS3 269阅读 2017-06-10 16:01:59 举报

flex详解

使用弹性布局 需要在 父盒子中 开启弹性布局

元素默认分两个轴排布

  • 主轴 默认是X方向
  • 副轴 默认是Y方向

调整元素 在主轴上的 排布方式
justify-content
flex-end 主轴末尾
flex-start 默认值
center 居中
space-between 左右靠边 中间间隙 相等排布
space-around 左右间隙相等

设置副轴的对齐方式
align-items
如果只有一行 设置元素在副轴上的对齐方式
flex-start
flex-end
center

单独设置元素在副轴上的对其方式 会覆盖父元素的align-items
align-self:flex-start / flex-end / center

调整主轴方向变为垂直

flex-direction: column;

设置主轴的排布  哪怕方向改变 
justify-content: flex-end;

设置副轴的排布 方向改变之后 依旧是设置副轴 
align-items: center;

弹性布局默认只能在一行待着 无法换行

开启换行

flex-wrap:wrap;

变为多行就无法使用align-items进行位置设置,而是用align-content
属性设置 align-content 和 justify-content一模一样
若只有一行 无法生效

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复