前端第十二章 弹性盒重难点精解

第十二章 弹性盒

第一讲.弹性盒简介

flex弹性盒,也叫伸缩盒,是css中的又一布局手段,主要用来代替浮动,完成页面的布局

有了它,可以很大程度上不用float,但是如果在老版本浏览器中还是得用float

flex可以使元素具有弹性,让元素可以跟随页面大小的改变而改变

两个概念:

1. 弹性容器

   如果想使用弹性盒,必须先将元素设置为弹性容器

   两种方式设置弹性容器:

   1. dispaly:flex 设为块级弹性容器 用的比较多
   2. display:inline-flex 设为行内弹性容器 不会独占一行

2. 弹性元素

   弹性容器的子元素称为弹性元素,也叫弹性项

   只有子元素是,后代元素不是

   一个元素可以同时是弹性容器和弹性元素

flex-dircetion属性 指定容器中弹性元素的排列方式

可选值:

1. row 默认值,弹性元素在容器中水平排列,从左向右
2. row-reverse 弹性元素在容器中反向水平排列,从右向左
3. column 弹性元素纵向排列
4. column-reverse 弹性元素反向纵向排列

主轴:弹性元素的排列方向称为主轴,row的主轴自左向右

侧轴:与主轴垂直方向的是侧轴

伸长属性:flex-flow 指定弹性元素的伸展的系数

当父元素有多余的空间时,子元素如何伸展

默认值是0

父元素的剩余空间会按比例分配

.box1{
    flex-flow:0;
}
.box2{
    flex-flow:1;
}
.box3{
    flex-flow:2;
}

则box1不伸展,box2和box3按照1:2分配剩余空间

收缩属性:flex-shrink 指定弹性元素的收缩系数

当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩

默认值是1

如果设置为0,就不会收缩而是溢出

值越大,收缩的越多

弹性以后,再无浮动

补充:

text-align:center;

可以设置文字的居中效果,只能设置在块元素上

第二讲.弹性容器的样式

flex-warp属性:设置弹性元素是否在弹性元素中自动换行

可选值:

1. nowarp:默认值,不会自动换行
2. warp:会自动换行
3. warp-reverse:元素沿着辅轴反方向换行

可以将flex-warp和flex-direction简写为一个:flex-flow

flex-flow:row warp;

justify-content属性:如何分配主轴上的空白空间(主轴的元素如何排列)

可选值:

1. flex-start:元素沿着主轴的起边排列(从左向右)
2. flex-end :元素沿着主轴的终边排列(从右向左)
3. center: 元素居中排列
4. space-around:空白分到每个元素两侧(中间元素的空隙是边缘元素的两倍,因为有两倍的空白)
5. space-evenly:空白分配到每个元素一侧(所有元素空隙相等,兼容性不太好)
6. space-between:空白分配到元素中间

align-items属性:元素在辅轴上如何对齐(元素间的关系)

justify表示主轴,align表示辅轴

可选值:

1. stretch:默认值,将元素的长度设置为相同的值(每一行内的高度一致,但是不同行的高度可能不同)
2. flex-start:元素不会拉伸,沿着辅轴起边对齐(从上开始往下排)
3. flex-end:元素不会拉伸,沿着辅轴终边对齐(从下开始往上排)
4. center:居中对齐

align-content属性:辅轴上的空白空间分布

可选值与justity-content相同,不赘述

align-self属性:覆盖当前弹性元素上的align-items

是弹性元素的属性,这里提前说了

align-items:stretch;

第三讲.弹性元素的样式

flex-grow属性:弹性的增长系数

属性值为int,按比例分配空白

flex-shrink属性:弹性元素的缩减系数

缩减系数的计算方式比较复杂,缩减多少是根据缩减系数和元素大小综合确定

flex-basis属性:元素的基础长度

指定的是元素在主轴上的基础长度,默认值为auto,表示参考元素自身的宽高

如果主轴是横向的,则该值指定的是元素的宽度,会默认覆盖掉给div设置的width

如果主轴是纵向的,则该值指定的是元素的高度,会默认覆盖掉给div设置的height

有一个简写属性:flex,可以同时设置grow shrink basis

flex:1 1 auto;

有顺序,顺序为:grow shrink basis

可选值:

1. initial:表示 grow:0 shrink:1 basis:auto只能减
2. auto:表示 grow:1 shrink:1 basis:auto可增可减
3. none:表示 grow:0 shrink:0 basis:auto 没有弹性

order属性:决定元素的排列顺序

数字从小到大,指的是从左到右

.box1{
    order:3;
}
.box2{
    order:2;
}
.box1{
    order:1;
}