css学习11：弹性布局

二十一、弹性布局

弹性布局是 css3 主推的一个布局，传统布局是基于文档流和盒子模型的，主要以浮动布局，定位布局等。

给父元素加 display：flex；使子元素横向排列，不用每个子元素浮动了

父元素不需要清除浮动了，高度依然被子元素撑开

1.弹性布局的基本概念

(1)容器和项目

使用 flex 布局的元素（父元素），称为"容器"

它的所有“子元素”自动成为容器成员，称为 "项目"

 它们各自有控制布局的属性，必须是容器包裹着项目

 (2)主轴

主轴就是项目的排列方向，主轴会出现四个方向：

- x 轴：起点在左侧

- x 轴：起点在右侧

- y 轴：起点在顶端

- y 轴：起点在底端

(3)交叉轴

交叉轴就是在主轴的垂直方向，项目可在交叉轴上移动

2.将容器指定为 flex 布局

- 任何一个容器都可以指定为 Flex 布局:

- 行内元素也可以使用 Flex 布局:

- 注意，设为 Flex 布局以后，子元素的 float、clear 等属性将失效。

3.容器的属性

 (1)主轴的方向

`flex-direction` 代表主轴的方向，即项目的排列方向

- row 左向右

- row-reverse 右向左

- column 上向下

- column-reverse 下向上

.box { /*            左向右    右向左        上向下      下向上 */ flex-direction: row | row-reverse | column | column-reverse; }

(2)项目换行

默认情况下，项目都排在一条线上。`flex-wrap`属性定义如果一条轴线排不下，如何换行的模式。

- nowrap 默认不换行

  - wrap 换行

- wrap-reverse 反向换行

.box { /*          默认不换行  换行    反向换行 */ flex-wrap: nowrap | wrap | wrap-reverse; }

(3)主轴和换行的简写方式

`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`横向排列不换行。

.box { flex-flow: <flex-direction> || <flex-wrap>; flex-flow: row wrap; /*横向换行*/ flex-flow: column nowrap; /*纵向不换行*/ }

(4)主轴上的对齐方式

`justify-content`属性定义了项目在主轴上的对齐方式。是默认起点对齐、终点对齐还是居中对齐等。

 前提是，如果项目会换行,则下行按照下一行的数量对齐，间隔与上一行可能不同。不换行元素会在容器缩小是缩小，不会出现对齐效果。

- flex-start 默认起点对齐

- flex-end 终点对齐

- center 居中对齐，一起居中

- space-between 两端对齐，项目之间的间隔都相等，左右贴边

- space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

.box {   justify-content: flex-start |  默认起点对齐   flex-end | 终点对齐   center | 居中对齐，一起居中   space-between | 两端对齐，项目之间的间隔都相等，左右贴边   space-around; 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍 }

(5)交叉轴对齐方式

`align-items`属性定义项目在交叉轴上如何对齐，"前提是"前提是项目换行,容器的垂直轴方向是有独立高度或者宽度的。注意：多行项目会有行间距离

- flex-start 交叉轴的起点对齐

- flex-end 交叉轴的终点对齐

- center 交叉轴的中点对齐

- baseline 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来

- stretch 默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度

.box {   align-items: flex-start | 交叉轴的起点对齐   flex-end | 交叉轴的终点对齐   center | 交叉轴的中点对齐   baseline | 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来   stretch;默认值，如果项目未设置高度或设为auto，将占满整个容器的高度 }

(6)多轴线对齐方式

 `align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

- flex-start 与交叉轴的起点对齐。

- flex-end 与交叉轴的终点对齐。

- center 与交叉轴的中点对齐。

- space-between 第一行和最后一行贴开始和结束，其他均分中间位置

- space-around 每行间距两侧或上下间距相等，比边框间距大一倍

- stretch 默认值

.box {   align-content: flex-start |与交叉轴的起点对齐。    flex-end |与交叉轴的终点对齐。     center |与交叉轴的中点对齐。     space-between |第一行和最后一行贴在开始位置和结束位置，其他均分中间位置     space-around |每行间距两侧或上下间距相等，比边框间距大一倍     stretch;(默认值) }

4.项目属性

 (1)项目排列数次序（排队拿号）

- `order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

- 相当于拿号排队，默认是原有元素的顺序，这个是可以重新更改的，单独设置给每个项目，值越大排的越靠后。

- 调整顺序用的不是很多，因为有点反人类思维

.item { order: ; /*数值，值越大排的越靠后，默认为0;*/ }

 (2)项目的放大比例（多吃多占）

- `flex-grow`属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大

- 当项目设置了该属性之后，原来的宽度或宽度失效。

- 项目不换行时：

  - 父元素有多余的空间，设置放大比例的元素按照比例占据多余空间

  - 父元素没有多余空间，当父元素总长度等于和低于元素宽度或者高度相加总和时，元素们同等比例缩小，无特殊化，放大比例失效。

- 项目换行时：

  - 父元素会有多余空间，因为只要空间不够就换行了，只要有多余空间，放大比例元素会在当前行按照自己的比例分隔剩余空间。默认比例的元素会正常按照宽度占位

  - 父元素宽度与元素宽（高度）相加正好相等，多余空间是 0，那么设置放大比例的元素，则暂时不会变更宽度。

.item { flex-grow: number比例值; /* default 0 */ }

 (3)项目的缩小比例（缩水比例

- `flex-shrink`属性定义了项目的缩小比例，默认为 1，负值无效。

- 前提是容器设置不换行才能看出效果，容器设置宽度看的更清晰

- `flex-shrink：0`：项目不换行容器缩小，其中的项目同等压缩，但设置了 flex-shrink：0 的项目不会压缩，会保持自己的宽度（高度）也就是不参与压缩

- `flex-shrink`：其他值如 2、10 等，缩小比例值越大，缩小的比重就越大

.item { flex-shrink: <number>缩小比例值; /* default 1 */ }

 (4)项目的自动尺寸（特立独行）

- 当`flex-basis`和`width`属性同时存在时，`width`属性不生效

- flex 布局有多余空间时，item 的宽度为`flex-basis`设置的宽度

- 当 flex 空间不够时，由于`flex-shrink`的默认值为 1，所以所有 flex items 容器等比例被压缩，设置`flex-basis`的项目也会按照最大值的相对比例压缩，不会和其他元素比例相同。

.item { flex-basis: <length>如200px | auto; /* default auto */ }

 (5)flex 属性简写

flex 属性是 flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(自动尺寸)的简写，默认值为 0 1 auto。后两个属性可选。

常用设置是：flex:0 0 ??px;  不放大，不缩水，占多少尺寸