弹性盒:
可以对一个容器中的子元素进行排列,对齐,分配空白区间。
display:fiex;将元素作为弹性伸缩盒显示
display-inline-flex将元素作为内联块级弹性伸缩盒
将容器设置为弹性盒以后,子元素中的float,clear,vertical-align 属性都会失效
弹性子元素:--类似于行内块元素,如果不设置宽高,由内容撑开;即使是行内元素也可以设置宽高。
有两条轴:
默认主轴方向---x轴的方向,水平向右(左侧边为主轴的起始点,右侧边为主轴的终点)
默认的交叉轴(侧轴)方向--y轴的方向,水平向下(上方为侧轴的起点,下方为侧轴的终点)
主轴的方向取决于子元素的排列方向
flex-direction:row 默认值,水平向右,起点在左端
flex-direction:row-reverse;水平向左,起点在右端
flex-direction:column;垂直方向从上往下起点在上方
flex-direction:column-reverse;垂直方向-从下往上,起点在下方
设置主轴的对齐方式,弹性子元素在主轴方向的对齐
justify-content:flex-start;默认值,主轴在顶端对齐
justify-content:flex-end 主轴在末端对齐
justify-content:center 居中对齐,子元素位于弹性容器中心
justify-content:space-between;两端对齐,子元素和元素之间有空白,项目之间的间距相等
justify-content-space-around;四周对齐,子元素之前,之间,之后都有空白,并且空白自行分配,项目和项目之间的间隔要比项目的边框的间距大一倍;
justify-content-space-evenly; 平均分配,项目与项目之间 项目于边框之间间距都相等
弹性子元素在侧轴上的对齐方式;
align-items : flex-start ; /**/子元素在侧轴的顶端对齐
align-items : flex-end;/*子元素在侧轴的末端对齐*/
align-items : center ; /*子元素在侧轴的中间对齐
align-items : baseline;/*子元素在第一行文字的基线对齐
align-items: stretch;/*默认值如果弹性子元素没有高度或者高度为auto,将占满整个容器的高度
弹性盒的换行属性:
/*弹性盒子的子元素的换行方式
flex-wrap: nowrap;/*默认值不换行*/
flex-wrap: wrap;/*换行 第一行在上方显示*
flex-wrap: wrap-reverse;/*换行第一行在下方显示
折行,控制行于行之间的距离:
align-content:flex-start;默认值,顶端没有间距
align-content: flex-end ;/*末端对齐,没有间距*/
align-content: space-between ;/*两端对齐,中间距离自动分配
align-content: space-around ;/*四周对齐
align-content: space-evenly ;/*平均分配*╱
注意:弹性盒项目为多行时才有效,必须要有折行属性
-->
<!-- 调整自身在侧轴的对齐方式*/
align-self:flex-start 在侧轴的起点对齐
align-self: flex-end; /*在侧轴的终点对齐
align-self: center; /* 在侧轴的中间对齐*/
align-self: stretch;/*如果弹性子元素没有高度或者高度为auto,将会占满整个容器*/
-->
<!--
/*改变子元素的排列顺序取值:数值,没有单位,默认数值为0,数值越小,越靠前
可以为负数,必须为整数,不能为小数,
order: -1.2;
-->
<!--
fLex属性:指定弹性子元素如何分别剩余的空白区间
fLex-grow:子元素的放大比例(子元素的宽度之和〈父盒子的宽度)取值:数值,没有单位,默认值日,表示不放大
负值无效
可以为小数
注意:当容器有剩余空间是有效
fLex-shrink属性:子元素的缩小比例((子元素的宽度之和〉父盒子的宽/
flex-shrink: 1;/*默认值,表示空间不足时,等比例缩小*/
flex-shrink : 0;/*表示空间不足时,不缩小*/
flex-shrink : -2;/*负值对该属性无效*/
flex-shrink : 1.5;表示可以为小数;
实际的宽-
(当前元素的宽*shrink值)/(元素1*元素1的shrink值+元素2*元素2的shrink值...)*溢出的空间宽度
fLex-basis属性:定义弹性盒子元素的基准值(参与计算的最终值---
1、基于它计算了容器的剩余空间)
2、基于它计算增长以后的最终值)
/*复合写法
fLex-fLow: fLex-direction fLex-wrap;*/
caLc)函数
用于动态计算长度值,
支持的运算符+-*/加减乘除
在运算符的前后都需要保留一个空格
letter-spacing文字间隙