起因
因需求遇到一布局从左向右渲染内容,换行之后是内容右对齐。
没有第一时间想到flex布局,内容多数被遗忘,遂重温一遍。
flex布局
flex弹性布局,任何一个容器都可以使用。如果是webkit内核的浏览器,需要加上-webkit
前缀
.div{
display: flex;
display: -webkit-flex;
//行内元素用inline-flex
display:inline-flex;
}
flex容器
图片来源阮一峰博客
main axis: 横向主轴
main start: 横向开始位置
main end: 横向结束位置
cross axis: 竖向主轴
cross start: 竖向开始位置
cross end: 竖向结束位置
容器属性
- flex-direction : 决定主轴方向
- flex-wrap : 决定是否换行
- flex-flow : 上面两个属性简写方式
- justify-content : 内容对齐方向
- align-items :竖向轴对齐方式
- align-content:定义多根轴线对齐方式
flex-direction
决定主轴方向,如图
image.png
.div{
flex-direction: row | row-reverse | column | column-reverse;
// row: 默认值,水平方向,起点在左边
// row-reverse : 主轴为水平方向,起点在右边
// column: 主轴为垂直方向,起点在上边
// column-reverse: 主轴为垂直方向,起点在下方
}
flex-warp
决定是否换行,换行可以控制第一行在上边还是下边
image.png
.div{
flex-warp: nowrap | wrap | wrap-reverse;
// nowrap : 默认不换行
// wrap: 换行,第一行在上边
// wrap-reverse: 换行,第一行在下边
}
flex-flow
上面两种属性的简写组合
.div{
flex-flow: <flex-direction> || <flex-wrap>
// <flex-direction>的任何属性
// <flex-wrap>的任何属性
}
justify-content
image.png
.div{
justify-content: flex-start | flex-end | center | space-between | space-around;
// flex-start: 默认 左对齐
// flex-end: 右对齐
// center: 居中
// space-between: 两端对齐,项目之间间隔相等
// space-around: 每个项目两侧间隔相等,项目间的间隔比项目边框大一倍
}
align-items
控制竖向的对齐方式
image.png
.div{
align-items:flex-start | flex-end | center | baseline | stretch;
// stretch: 默认值,如果项目没有设置高度或者auto,将充满整个容器
// flex-start: 顶部对齐
// flex-end:底部对齐
//center:容器中间对齐
// baseline:项目第一行文字基线对齐
}
以上内容参考阮一峰博客,更多详细flex布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool