一直对flex布局一知半解。不能这样。今天总结一下。
指定flex:设置display:flex | inline-flex 此操作会将float、clear等属性屏蔽。
main axis:主轴
cross axis:交叉轴
flex容器:指定一个容器作为flex,可以在该容器上设置一些属性。
容器的六种属性:
- flex-direction:决定主轴的方向
- row 左→右(默认)
- row-reverse 右→左
- column 上→下
- column-reverse 下→上
- flex-wrap:决定是否可换行
- nowrap 不换行(默认)
- wrap 主轴总尺寸超过容器时换行,第一行在上方
- wrap 同上 第一行在下方
- flex-flow
- justify-content:项目在主轴的对齐方式
- flex-start:左对齐
- flex-end:右对齐
- center:居中
- space-between:两端靠边,项目之间间隔相等
- space-around:每个项目两侧间隔相等
- align-items:项目在交叉轴的对齐方式
- stretch(默认) / 未设置高度 / 高度为auto:元素占满整个容器
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- flex-center:交叉轴的中心对齐
- baseline:项目第一行文字的基线对齐
- align-content:多跟轴线的对齐方式(当设置为nowrap 不换行时,样式只会有一根轴线,因此不会受此属性影响。但是当换行时,形成了多跟轴线,就会应用此属性进行设置。)
- strech(默认)多跟轴线评分交叉轴的空间。
- flex-start:在交叉轴的起点处对齐
- flex-end:在交叉轴的终点对齐
- center:在交叉轴的中间对齐
- space-between:两侧轴线两端对齐,中间的轴线平分剩余空间
- space-around:每个轴线两侧间隔相等,平分交叉轴空间