flex 项目属性（二） | 每天学一点flex
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情
Flexbox布局有两种主要的组件：容器（container）和项目（item）。项目属性指的是项目元素上设置的一些布局属性，这些属性将会影响项目在容器中的布局。
接下来我们来看一下部分项目属性，order、flex-grow、flex-shrink 属性。
项目属性
1. flex-basis 属性
flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值，如果没有设置，则默认值为 auto，表示子项的空间为 width/height 的值。
来看一个具体的示例。在下面的例子中，我们将项目的宽度设置为 30px，这样一行就会产生剩余空间。接下来我们指定一个项目的 flex-basis 值为 50%，那么该项目就只会伸展至 50% 的空间。
注：可以理解为相比 flex-grow，flex-basis 能够设置分配剩余空间的一部分，而不是全部分配。
示例代码如下：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
}
/* 项目 css */
.item {
width: 30px; /* 将盒子宽度改为 30px，这样一行就会产生剩余空间 */
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
/* 每个项目背景颜色 */
.one {
background-color: red;
flex-basis: 50%; /* 该项目就只会伸展至 50% 的空间 */
}
效果：
2. flex 属性
flex 属性是 flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
后两个属性可选。该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）。
注：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
3. align-self 属性
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
语法如下：
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
可以看到，该属性可取到的值有 6 个，除了 auto 以外，其他都与 align-items 属性完全一致。
示意图如下：
下面是一个 align-self 属性的具体示例。
首先我们设置容器的 align-items 属性为 center，表示所有项目的垂直对齐方式为居中对齐。然后单独设置某一个项目的 align-self 属性为 flex-end，和其他盒子的垂直对齐方式不同。
具体代码如下：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
align-items: center; /* 设置项目的垂直对齐方式为 center */
}
/* 项目 css */
.item {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
/* 每个项目背景颜色 */
.one {
background-color: red;
align-self: flex-end; /* 设置该盒子的垂直对齐方式为 flex-end */
}
效果如下：
总结
-
flex 布局可以简便，完整，响应式地实现各种页面布局，它已经成为当前布局的首选方案。
-
任何一个容器都可以指定为弹性盒，只需要将 display 属性设置为 flex 即可。
-
采用 flex 布局的元素，会成为 flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称之为 flex 项目（flex item），简称项目。
-
学习弹性盒子，其实主要就是学习容器上面可以设置的属性，以及项目上面可以设置的属性。
-
容器上常见的可设置的属性有 6 个，分别是 flex-direction、flex-wrap、flex-flow、justify-content、align-items 以及 align-content。
-
项目上常见的可设置的属性也有 6 个，分别是 order、flex-grow、flex-shrink、flex-basis、flex 以及 align-self。
