flex布局属性大全

578 阅读1分钟

flex布局:

display: flex;

justify-content: center;——水平居中

flex-start——左对齐

flex-end——右对齐

center——居中

space-between——水平两边贴合对齐

space-around——水平平均对齐(首尾位距离小)

space-evenly——绝对水平平均对齐(首尾距离全部都相等)

align-items: center;——垂直居中

center——居中

flex-start——左对齐

flex-end——右对齐

align-content: flex-start;——垂直贴合对齐

flex-start——左对齐

flex-end——右对齐

space-between——水平两边贴合对齐

space-around——水平平均对齐(首尾位距离小)

space-evenly——绝对水平平均对齐(首尾距离全部都相等)

flex-wrap: wrap;——自动换行属性

flex-wrap: nowrap;

flex-wrap: wrap;

flex-direction: column;——设置水平垂直方向

column——垂直方向

row——水平方向

flex: 1;——设置占至剩移的指数

align-self——设置子项让单个元素垂直对齐方式

flex-start——左对齐

flex-end——右对齐

center——居中

123.jpg