1、flex-direction
此属性决定主轴的方向
.flex{
flex-direction: row; // (默认值) 主轴水平方向,从左往右 如图:
flex-direction: row-reverse; // 主轴水平方向的逆方向,从右往左
flex-direction: column; // 主轴为垂直方向,从上往下
flex-direction: column-reverse; // 主轴为垂直方向的逆方向,从下往上
}
2、flex-wrap
此属性定义,如果一条轴线上排列不下,换行的方式
.flex{
flex-wrap: nowrap; // (默认)不换行 如图:
flex-wrap: wrap; // 正常换行 从上到下 如图:
flex-wrap: wrap-reverse; // 逆方向换行 从下到上 如图:
}
3、flex-flow
此属性定义,是flex-direction和flex-wrap的方式;
.flex {
flex-flow: <flex-direction> 空格 <flex-wrap>;
}
4、justify-content
此属性定义,项目在主轴上的对齐方式
.flex{
justify-content: flex-start; // 左对齐(默认)
justify-content: flex-end; // 右对齐
justify-content: center; // 居中
justify-content: space-between; // 两端对齐。且项目间间隔相等
justify-content: space-around; // 每个项目两侧间隔相等,所以项目间 间隔 比项目与边框间间隔大一倍
justify-content: space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}
转载来自:https://blog.csdn.net/domunweb/article/details/95064383
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。