css弹性盒子

弹性盒子

​ 1.容器:最大的盒子,也就是最外层的父元素

​ 2.项目:小的盒子,父元素里的子元素

​ 3.水平轴:所谓的x轴

​ 4.垂直轴:所谓的y轴

​ 5.主轴:触发弹性盒子之后,子元素的排列方向,排列方向所在的轴线称为主轴

​ 6.侧轴:与主轴对立的方向,也被称之为交叉轴,交叉轴于主轴垂直

弹性:如果想要往里面压缩是可以压缩的,想要往外扩大是可以扩大的

弹性布局中重点看主轴

!触发盒子:display : flex

!修改主轴方向: flex-direction : 

!调整主轴对齐方式: justify-content :

!调整侧轴对齐方式: align-items :

!折行:  flex-wrap : 

!调整行间距: align-content : 

弹性盒子的使用场景:页面布局的时候用 pc和移动端页面布局都能用

弹性盒子相关属性----必须添加在最近父元素上的

1:设置为弹性布局 
      !display:flex;
       display:inline-flex;

2:设置主轴的方向,因为子元素项目沿着主轴排列,所以主轴改变之后子元素的排版也会发生改变
        flex-direction:row;默认值,主轴是水平的,子元素从左往右排列  
        flex-direction:row-reverse;横着反向,主轴是水平的,子元素从右往左排列  
       !flex-direction:column;主轴是垂直的 子元素从上往下排列
        flex-direction:column-reverse;主轴是垂直的 子元素从下往上排列
        
3:设置子元素超出是否折换
        flex-wrap:nowrap;默认值,超出不折换
       !flex-wrap:wrap;折换 换的是行还是列看主轴
        flex-wrap:wrap-reverse;折换且反向
(flex-flow设置flex-direction和flex-wrap的简写)        
4:设置主轴的对齐方式 justify-content
     如果主轴是水平的justify-content该属性就是设置水平的对齐方式,开始在左结束在右
     如果主轴是垂直的justify-content该属性就是设置垂直的对齐方式,开始在上结束在下
       justify-content:flex-start;开始对齐,默认值
       justify-content:flex-end;结束对齐
      !justify-content:center;居中对齐
      !justify-content:space-between;2端对齐
      !justify-content:space-around;2边间距跟中间的间距是1:2
      !justify-content:space-evenly;2边间距跟中间的间距是1:1
      
5:设置侧轴也就是交叉轴的对齐方式
   6-1:align-items:
     stretch(拉伸,默认值)
     flex-start(开始对齐)
     flex-end(结束对齐)
     center(居中对齐)     
   6-2:align-content:
   stretch(拉伸,默认值)
   flex-start(开始对齐)
   flex-end(结束对齐)
   center(居中对齐)
   space-between(2端对齐)
   space-around(2边间距跟中间的间距是1:2)
   space-evenly(2边间距跟中间的间距是1:1)
		如果主轴是水平的,侧轴也就是交叉轴就是垂直的,那么align-items和align-content设置的就是垂直对齐方式,开始在上结束在下   
        如果主轴是垂直的,侧轴也就是交叉轴就是水平的,那么align-items和align-content设置的就是水平对齐方式,开始在左结束在右
        align-items适合单行或者单列或者多行或者是多列对齐,但是功能比较少,且多行或者多列之间是有缝隙的   
  	    align-content必须配合flex-wrap使用,也就是适合多行或者是多列,且可以清除多行或者是多列之间的间距 

弹性盒子相关属性----必须添加在子元素自己上的

1:order 设置子元素的前后顺序 默认值是0  数字越大越靠后,数字越小越靠前 不带单位

2:flex简写是flex-grow（设置放大比例）  
		   flex-shrink(设置缩小比例)  
		   flex-basis(设置固定值)的简写  
!简写flex常用给值是1,可以让该盒子占据剩余的空间

3:align-self设置自己的对齐方式
        align-self:
        	stretch(拉伸)
        	flex-start(开始对齐)
        	flex-end(结束对齐)
        	center(居中对齐) 
 
 
 	仅做了解以下的内容
4:flex-basis 设置子元素的具体值(类似设置的width或者是height),看主轴:
	如果主轴是水平的flex-basis设置的效果就是width的效果  
	如果主轴是垂直的flex-basis设置的效果就是height的效果  
	如果flex-basis和width或者height发生冲突最终解析的是flex-basis
	
5.flex-grow 设置子元素的放大比例(算的是剩余空间的)前提得有剩余空间,如果没有剩余空间就失效了
	默认值是0  如果flex-grow都给1,那么剩余多少,就等分给到对应的盒子;如果flex-grow都给1,其中某个给2,那么剩余多少空间,进行等分之后,数据为2的比数据为1的要多一倍
	
	假设父元素盒子宽度是500  子元素已经占据了200 剩余 300
     第1个子元素设置flex-grow:1;那么第1个子元素在原来宽度的基础上+(剩余空间300/5=60)
     第2个子元素设置flex-grow:2;那么第2个子元素在原来宽度的基础上+(剩余空间(300/5)*2=120)
     
6:flex-shrink 设置子元素的缩小比例(前提是没有剩余空间)
     默认值是1 如果flex-shrink都给1,那么是把多余(超出)的空间进行等分;如果给的属性值是0,那么不会被压缩;;;如果flex-shrink都给1,其中某个给2,那么剩余多少空间,进行等分之后,数据为2的比数据为1的要多一倍
     假设父元素盒子宽度是500  子元素已经占据了800  超出300
       第1个子元素设置flex-shrink:1; 假设宽度默认是200-(超出空间300/5=60)
       第2个子元素设置flex-shrink:2; 假设宽度默认是200-(超出空间300/5=60*2)

!触发弹性盒子之后以下条件都满足

1.内部子元素从左向右横向排列

2.子元素如果没有设置高度,那么高度默认是拉伸盛满父元素的
  子元素如果没有设置宽度,那么宽度默认是内容宽度
  1)如果子元素的宽度之和<父元素的宽度,那么就是设置的宽度显示
  2)如果子元素的宽度之和>父元素的宽度,默认是被压缩显示的,压缩之后的宽度是父元素总宽的平均值
  以上所有的规律都是因为父元素此时的主轴是水平的

3.如果子元素原来是行内元素,此时行内元素会变成块级元素(即弹性布局中所有子元素都支持宽高)

4.如果只有一个子元素,给子元素添加margin:auto;会让子元素实现水平垂直正居中

5.只会影响子元素的排列方式,不会影响孙子辈的排列方式