弹性盒子的使用

这个是CSS3中新增的一种布局的方案，用来代替传统的布局方案的。弹性盒子可以更标准的进行网页的布局。

布局中无非就是横平竖直

• 横着排列时每个元素的排列方式的问题
• 垂直方向上对齐的问题。

弹性盒子名词

容器

我们称我们设置了弹性盒子属性的元素为容器。如何才能把一个元素变成弹性盒子 ？

选择器 {
  display: flex;
}

只要我们添加了该属性，那么这个元素就是一个弹性盒子，弹性盒子是在块元素和行内元素之外的一种新的元素形式。可以设置宽高，并且没有任何的之前我们会出现的问题。

主副轴

在容器中，会有两类轴，主轴和副轴。

主轴默认为横轴（横着的线），副轴默认为纵轴（竖着的线）

主副轴可以进行切换

轴和容器边的焦点

每个轴都和容器的边有一个焦点，这个焦点默认情况下

• 横轴从左到右 分别为 flex-start center flex-end
• 纵轴从上到下 分别为 flex-start center flex-end

轴的交叉点可以互换方向。

默认布局的方式

在弹性盒子的容器中，所有元素（项目）会沿着主轴排列，从flex-start到flex-end点结束。（默认情况下，元素会从左向右横向排列）

因此我们想要改变弹性盒子排列方式，我们只需要改变主副轴，就可以让元素横着或者竖着排列。只需要交换flex-start和end的位置，就可以改变排列的方向。

项目

在容器的元素，都叫项目，不管是什么标签，都需要按照弹性盒子的要求布局。哪怕我们项目是span div这些元素，只要是在容器中，他们都是弹性盒子中的项目。

项目本身也可以通过设置display: flex来变成一个容器。

属性

容器属性

justify-content

默认情况元素横向排列，我们可以通过这个属性，来改变元素在主轴上排列的方式。

• flex-start 默认值

让元素在主轴靠flex-start点进行排列

• flex-end

让元素在主轴靠flex-end点进行排列

• center 比较常用

让元素在主轴居中进行排列

• space-between 最常用的属性

可以然首位两个元素紧贴flex-start和flex-end点，然后元素和元素间的距离等分

• space-around 不常用

每个元素左右两边间隔相同且不重叠

• space-evenly

每个元素左右两边间隔相同

align-items

用来控制元素在副轴上的排列方式，通过控制副轴排列，我们可以实现对应的元素居中或其他效果

• center 居中 最常用

元素在副轴上居中排列

• flex-start

元素在副轴上靠flex-start排列

• flex-end

元素在副轴上靠flex-end排列

• stretch

如果没有设置高度的情况，是直接拉伸的，顶flex-start 立 flex-end，如果设置了高度，则和flex-start一样的效果。

flex-direction

在弹性盒子的容器中，所有元素（项目）会沿着主轴排列，从flex-start到flex-end点结束。

当主轴改变为列时，一定要意识到一个问题，align-items和justify-content去设置的元素排列就不一样了。

因为align-items定义元素在副轴上的排列方式

justify-content定义元素在主轴上的排列方式

注意！！！！！一定要记住：抛弃原有的默认的布局方式，只要布局就用弹性盒子

direction方向的意思，改变主轴方向（切换主副轴）

选择器 {
  flex-direction: 值;
}

• row 默认值 横轴作为主轴

横轴作为主轴 flex-start在左 flex-end在右

• column 用到这个属性时最常用的属性值 纵轴作为主轴

纵轴作为主轴 flex-start在上 flex-end在下

• row-reverse

横轴作为主轴 flex-start在右 flex-end在左

• column-reverse

纵轴作为主轴 flex-start在下 flex-end在上、

flex-wrap

用来让项目换行的。如果在主轴上，容器的尺寸小于项目在主轴方向上的总尺寸，那么对应的尺寸被压缩。

我们大部分情况下，不想项目被压缩，我们可以使用对应的换行操作，将项目换行。

选择器 {
  flex-wrap: 值;
}

• nowrap 不换行 默认值
• wrap 换行不够的位置换行
• wrap-reverse 倒序换行 不常用

如果使用wrap，元素换行，则在副轴上，从flex-start开始到flex-end结束。如果我们设置了wrap-reverse，则副轴的flex-start和flex-end点会替换

flex-flow

这个属性是flex-direction和flex-wrap的复合属性

选择器 {
  flex-wrap: wrap;
  flex-direction: column;
}

可以写成
选择器 {
  flex-flow: column wrap;
}

利用flex-flow可以实现对应的两个属性的复合写法。

align-content 不常用

控制行在副轴上的排列方式，他的属性值和justify-content形同，并且多了一个拉伸stretch属性。

• stretch 默认值 拉伸 不能设置项目高度

• flex-start 靠flex-start排列

• flex-end 靠flex-end排列

• center 居中 用的比较多

• space-between 上下两行贴边中间等分

• space-around 左右间距相同，不重叠

• space-evenly 所有元素之间间距相同

项目属性

项目属性是写在项目元素上的属性，有六个属性供我们使用。

当容器中主轴的尺寸小于项目在主轴上占的总尺寸时，项目在主轴方向上会被压缩。

当容器中主轴的尺寸大于项目在主轴上站的总尺寸时，项目在主轴方向上不会被放大。

flex-grow

如果容器中主轴上所占的空间有剩余空间，则可以让项目自动放大（默认不会自动放大）

所有的元素都是166.67，因为自动放大。

flex-grow可以让元素自动占据剩余的空间，我们可以给元素设置

选择器 {
  flex-grow: 1;
}

在我们使用的过程中，我们只会让元素放大或者不放大，只会去设置0 或者 1

放大后的尺寸计算 = 原始尺寸 + (需要占用的尺寸 / 项目总的grow值) * 对应元素的grow值

flex-basis

flex-shrink

定义项目是否自动压缩（主轴的尺寸小于项目在主轴上占的总尺寸）

给对应的项目设置flex-shrink: 0 让我们的元素不被压缩。

不自动压缩

项目选择器 {
  flex-shrink: 0;
}

flex-shrink只要不设置为0，都会自动压缩，值的大小控制的是元素被压缩的比例。在日常的布局中，我们只需要考虑元素需不需要被压缩即可。

压缩后的尺寸计算 = 原始尺寸 - (需要被压缩的尺寸 / 项目总的shrink值) * 对应元素的shrink值

flex-basis

一般不用，替代宽高设置项目在主轴上的占据的尺寸。

如果主轴是x轴，则表示宽度，如果是y轴，则表示高度。

这个属性在使用时需要看主轴是谁，不同的主轴代表不同的属性，这个属性的优先级要比width height 要更高一些。

默认情况下，basis属性为auto意思就是和对应的宽度或者高度一致。

flex

flex是 flex-grow flex-shrink flex-basis的复合属性。

选择器 {
  flex: flex-grow值 flex-shrink值 flex-basis值;
}

flex属性的默认值是 0 1 auto

选择器 {
  flex: 1; 
}

表示flex: 1 1 auto;

选择器 {
  flex: 1 0 100px; 
}

align-self 使用频次不高

和align-item类似，align-item是设置给容器，控制所有的项目在副轴上排列方式的。但是有些时候我们可能需要单独的给我们的项目设置副轴上的配列方式，所以需要单独设置align-self

选择器 {
  align-self: 值;
}

这个值和对应的align-items一致

• flex-start
• flex-end
• center
• stretch

order

基本上我没有用过。

在html结构不变的前提下，改变项目的顺序。

order越小，则越靠flex-start，order越大则越靠flex-end

默认情况下大家都是0，按照html结构排列。如果我们设置这个值则会改变排列的次序

可以是负值

常用属性

• display: flex;
• align-items