flex布局
flex布局的一些常用属性
@[TOC](文章目录)
前言
flex弹性布局,可以简便、完整、响应式地实现各种页面布局, 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
flex-direction:// 决定主轴的方向
row(默认值):// 主轴为水平方向,起点在左端。
row-reverse:// 主轴为水平方向,起点在右端。
column:// 主轴为垂直方向,起点在上沿。
column-reverse:// 主轴为垂直方向,起点在下沿。
flex-wrap:// 换行
nowrap(默认):// 不换行。
wrap:// 换行,第一行在上方。
wrap-reverse:// 换行,第一行在下方。
flex-flow:
flex-flow属性是 flex-direction属性和 flex-wrap属性的简写形式,默认值为row nowrap。
justify-content:// 水平对齐方式
flex-start(默认值):// 左对齐
flex-end:// 右对齐
center: // 居中
space-between:// 两端对齐,项目之间的间隔都相等。
space-around:// 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items:// 垂直对齐方式
flex-start:// 交叉轴的起点对齐。
flex-end:// 交叉轴的终点对齐。
center:// 交叉轴的中点对齐。
baseline: // 项目的第一行文字的基线对齐。
stretch(默认值):// 如果项目未设置高度或设为auto,将占满整个容器的高度。
以上在使用时先转为:display: flex; 弹性盒子