flex-弹性布局

本文主要是介绍flex-弹性布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

display: flex;  开启弹性布局
flex-direction: 设置弹性元素的排列方式(主轴)     row: 默认值, 水平排列(左向右)     row-reverse     column     column-reverse flex-wrap: 弹性元素是否在弹性容器中自动换行     nowrap: 默认值, 元素不会自动换行     wrap: 元素沿着辅轴方向自动换行     wrap-reverse: 元素沿着辅轴反方向换行 flex-flow: row wrap; direction, wrap的简写属性
justify-content: 主轴空白空间的分布     flex-start     沿着主轴起边排列     flex-end       沿着主轴终边排列     center         居中     space-around   空白分布到元素两侧     space-between  空白均匀分布到元素间     space-evenly   空白分布到单侧 align-content: 辅轴空白空间的分布 align-items: 元素在辅轴上如何对齐     stretch    默认值, 将元素的长度设置为相同的值     flex-start 元素不会拉伸, 沿着辅轴起边对齐     flex-end   元素不会拉伸, 沿着辅轴终边对齐     center     居中对齐     baseline   基线对齐

flex-grow:   弹性元素伸展系数 flex-shrink: 弹性元素收缩系数 flex-basis:  元素在主轴上的基础长度(主轴横向则为宽度, 主轴纵向则为高度)     auto 默认值, 参考元素自身的宽度或高度     传递具体数值则以此值为准 flex: 同时设置元素的 增长/缩减/基础长度     initial: "flex: 0 1 auto"     auto:    "flex: 1 1 auto"     none:    "flex: 0 0 auto" 即元素没有弹性 order: 可以指定弹性元素的排列顺序

这篇关于flex-弹性布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！