css 弹性盒子

弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间

为什么是 弹性盒子?

长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。

以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：

• 在父内容里面垂直居中一个块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

这些弹性盒子都可以实现。。。我草

指定元素的布局为弹性盒子

首先，我们需要给父元素设置display：flex

div {
   display:flex
}

注意：假如你想设置行内元素为弹性盒子，也可以置 display 属性的值为 inline-flex。

示例：

<style>
.parent {
	width:500px;
	height:200px;
	background-color:coral;
	display:flex; /*弹性盒子*/
}
.parent div {
	width:100px;
	height:100px;
	background-color:blueviolet;
}
</style>

<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

 

flex 模型说明

当元素表现为 flex 框时，它们沿着两个轴来布局，也就是 main axis 和 cross axis：

• 主轴（main axis）是水平 flex 元素放置的方向延伸的轴。该轴的开始和结束被称为 main start 和 main end。

• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素被称之为 flex 容器（flex container）

• 在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）

1. flex-flow

flex-direction 和 flex-wrap 的缩写 flex-flow。比如，你可以将

flex-direction: row;

flex-wrap: wrap;

缩写为

flex-flow: row wrap;

flex-direction

它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（从左到右）。

尝试将以下声明添加到 section 元素的 css 规则里：

flex-direction: column;  /*子元素总高度大于父元素高度也不会超出，会自适应*/

你会看到，这会将那些元素设置为列布局

注意：你还可以使用 row-reverse 和 column-reverse 值反向排列 flex 项目。用这些值试试看吧！

flex-wrap

当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局。

min-width: 100px; /*最小宽度100*/

在这里我们看到，子代确实超出了它们的容器。 解决此问题的一种方法是将以下声明

flex-wrap: wrap

2. flex

flex 缩写

• auto: 计算值为 1 1 auto
• initial: 计算值为 0 1 auto

• none：计算值为 0 0 auto
• inherit：从父元素继承

• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。

• [ flex-shrink ]：定义弹性盒子元素的收缩比率。

动态尺寸

现在让我们来看看如何控制 flex 项占用空间的比例。

给子项加入：

flex: 1

这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。

现在在上一个规则下添加：

flex: 2;  /* 你会发现：第2个占用2/4的空间 */

您还可以指定 flex 的最小值，会至少分配400的空间，剩下的可用空间再大家分配

flex-shrink

flex-grow、 flex-basis上面已经讲过了， flex-shrink 用于设置如何分配 溢出 的内容

这个示例中，假设忽略那个 1px 的 border，实际上盒子超出了 80px，那么超出的 80px 给 class d1 的分一份，class d2 的元素会分两份，所以 d2 缩得的多一些，可以自己试试

3. 水平和垂直对齐

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content: flex-start | flex-end | center | space-between | space-around

• flex-start：
  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
• flex-end：
  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

• center：
  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
• space-between：
  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

• space-around：
  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items

设置或检索弹性盒子元素在 纵轴 方向上的对齐方式。

align-items: stretch | center | flex-start | flex-end | baseline

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

• stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

• stretch - 默认。各行将会伸展以占用剩余的空间。
• flex-start - 各行向弹性盒容器的起始位置堆叠。

• flex-end - 各行向弹性盒容器的结束位置堆叠。
• center -各行向弹性盒容器的中间位置堆叠。

• space-between -各行在弹性盒容器中平均分布。
• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。这个属性可能看起来有点难理解，实际上就是子元素在纵轴上的位置

align-self: auto | flex-start | flex-end | center | baseline | stretch

• auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch：如果子项没有设置固定高度，那么扩展充满父容器

4. flex项排序

弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。

给 d1 元素设置 order: 1 他跑到结尾去了，怎么回事？

它实现的一些细节：

• 所有 flex 项默认的 order 值是 0
• order 值大的 flex 项比 order 值小的在显示顺序中更靠后

• 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一
• 你也可以给 order 设置负值使它们比值为 0 的元素排得更前面

5. flex嵌套

弹性盒子也可以互相嵌套，给子项设置 flex 即可