flex布局|网站前端开发_前端开发者

网站前端开发_前端开发者丨web前端 css

https://www.rokub.com

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一模一样
若只有一行 无法生效

 

网站前端开发_前端开发者丨web前端 css

https://www.rokub.com