----盒子属性
1、display: flex弹性盒子
2、flex-direction主轴元素排列方向
row （默认值）主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上沿
column-reverse 主轴为垂直方向，起点在下沿
3、justify-content主轴元素排列方式
flex-start （默认值）左对齐
flex-end 右对齐
center 居中
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-between 两端对齐，项目之间的间隔都相等
4、align-content辅轴元素排列方式（多行）
flex-start 辅轴起点对齐
flex-end 辅轴终点对齐
center 辅轴居中
space-around 辅轴每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
space-between 辅轴两端对齐，轴线之间的间隔平均分布
stretch （默认值）轴线占满整个交叉轴
5、align-items 辅轴元素对齐方式（单行）
strech （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start 辅轴起点对齐
flex-end 辅轴终点对齐
center 辅轴居中
baseline 项目的第一行文字的基线对齐
6、flex-wrap元素是否换行
nowrap （默认） 不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
----元素属性
1、flex-grow 父元素有剩余空间时，子元素按比例放大
2、flex-shrink 父元素的空间不足以容纳子元素时，子元素按比例收缩
3、flex-basis （默认auto）元素在主轴的基准值，参考元素自身的宽度/高度
如果传递一个具体的数值则以该数值为准，如果主轴是横向的，则该值指定的就是元素的宽度。如果主轴是纵向的，则该值指定的就是元素的高度
4、简写：flex：伸展系数 收缩系数 基准值
5、order元素排列顺序，数值越小排列越靠前
6、字体超过两行超过部分以省略号显示
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
7、字体超过一行超过部分以省略号显示
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
8、position定位，通过定位可以将放到页面的任意位置
static 元素没有开启定位，默认
relative 相对定位
1、不设置top,left,bottom,right等偏移量，元素位置不会发生变化
2、是相对于自身在文档流中的位置进行定位的
3、不脱离文档流
4、设置偏移量后，原来所占据的那个位置空间依然还在，不会被其他布局填充
absolute 绝对定位
1、不设置top,left,bottom,right等偏移量，元素位置不会发生变化
2、是相对于其包含块进行定位的（包含块：开启了定位的父元素，如果所有的父元素都没有开启定位则包含块就是窗口视图）。会随滚动条移动
3、脱离文档流
fixed 固定定位
1、不设置top,left,bottom,right等偏移量，元素位置不会发生变化
2、是相对于其窗口视图进行定位的。不会随滚动条移动
3、脱离文档流
sticky 粘性定位
1、可以在元素到达指定位置时将其固定
2、不脱离文档流
标签：flex,主轴,元素,基础,辅轴,对齐,定位,css 来源： https://blog.csdn.net/dongaddxing/article/details/122874142
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。