flex详解:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
使用弹性布局 需要在 父盒子中 开启弹性布局
元素默认分两个轴排布
- 主轴 默认是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一模一样
若只有一行 无法生效
» 本文来自:前端开发者 » 《flex布局_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/11423.html
» 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册