flex布局
目录
定义
// 为其所有直接子级开启弹性上下文
.container { display: flex; /* or inline-flex */ }
第一部分:container
1:弹性方向(flex-direction)
建立主轴,Flexbox是单向布局概念。可以将弹性项目想像为主要以水平行或垂直列布置。
// test
.container { flex-direction: row | row-reverse | column | column-reverse; }
- row(默认):从左往右
- row-reverse:从右往左
- column:从上往下
- column-reverse:从下往上
2:柔性包装(flex-wrap)
默认情况下,所有弹性项目都尝试放入一行,可以使用flex-wrap对其进行更改。
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap(默认设置):所有弹性项目都在一行上
- wrap:flex项目从上到下包装到多行上
- wrap-reverse:flex项目从下到上包装到多行上
3:flex-flow(用于父级flex容器元素)
flex-flow:flex-direction(弹性方向)和flex-wrap(柔性包装)属性的简写。他们共同定义了flex容器的主轴和横轴。默认值为row,nowrap。
flex-flow: <'flex-direction'> || <'flex-wrap'>
4:证明内容(justify-content)
flex-start (默认):将项目打包到flex-direction的开头。
flex-end :将项目包装在flex方向的末端。
center :项目沿线居中。
space-between :项目在行中均匀分布; 第一项位于开始行,最后一项位于结束行。
space-around :项目在行中均匀分布,周围具有相等的空间。 请注意,从视觉上看,空间是不相等的,因为所有项目的两侧都具有相等的空间。 第一项相对于容器边缘有一个单位的空间,但是下一项之间有两个单位的空间,因为下一项具有自己的适用间距。
space-evenly :项目被分配为使任意两个项目之间的间隔(以及边缘之间的空间)相等。
4:对齐项目(align-items)
flex-start
flex-end
center
stretch (默认):拉伸以填充容器(仍然遵守最小宽度/最大宽度)
baseline :项目是对齐的,例如基线是对齐的
5:对齐内容(align-content)
flex-start
flex-end
center
stretch (默认):线拉伸以占据剩余空间
space-between :项目均匀分布; 第一行在容器的开头,而最后一行在容器的结尾
space-around :每行周围均匀分布
第二部分
1:弹性盒子元素顺序(order)
2:弹性成长(flex-grow)
如果所有项目的flex-grow设置为1,则容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为2,则剩余空间将占其他子项的两倍
.item { flex-grow: <number>; /* default 0 */ }
3:弯曲收缩(flex-shrink)
4:柔性 flex(flex-shrink和flex-basis组合的简写)
// 默认值为0 1 auto 。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
example:使用flex解决一个几乎每天都会遇到的问题
居中
// 居中
.parent {
display: flex;
height: 300px;
}
.child {
width: 100px;
height: 100px;
margin: auto;
}