flex 盒子模式
只要在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面了。
#box-container {
display: flex;
}
行，列 Row Culomn
给元素添加 display: flex 属性可以让它变成 flex 容器， 然后可以让元素的项目排列成行或列。 只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。 创建一行将使子项水平对齐，创建一列将使子项垂直对齐。
flex-direction 的其他可选值还有 row-reverse 和 column-reverse。
注意： flex-direction 的默认值为 row。
#box-container {
display: flex;
flex-direction: row;
/* flex-direction: column */
}
父元素对齐 Align
子元素排列的方向被称为 main axis（主轴）。 对于行，主轴水平贯穿每一个项目； 对于列，主轴垂直贯穿每一个项目。
对于如何沿主轴线排放 flex 项目，有几种选择。 很常用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他选择包括：
-
flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置justify-content的值，那么这就是默认值。 -
flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。 -
space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。 -
space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。 -
space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
#box-container {
justify-content: center;
}
Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。
CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。
align-items 的可选值包括：
-
flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。 -
flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。 -
center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。 -
stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。 -
baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。
#box-container {
align-items: center;
}
换行 Wrap
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。
默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。
不过，使用 flex-wrap 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
换行方向的可选值有这些：
-
nowrap：默认值，不换行。 -
wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。 -
wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。
#box-container {
flex-wrap: wrap;
}
收缩 Shrink
上面提到的属性都是应用于 flex 容器（flex 子元素的父元素）的。 除此之外，flex 子元素也有很多实用属性。
首先介绍的是 flex-shrink 属性。 使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。
子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。
#box-1 {
flex-shrink: 1;
}
#box-2 {
flex-shrink: 2;
}
扩大 Grow
与 flex-shrink 相对的是 flex-grow。flex-grow会在容器太大时对子元素作出调整。
如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。
#box-1 {
flex-grow: 1;
}
#box-2 {
flex-grow: 2;
}
初始大小 Basis
flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。
flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整。
#box-1 {
flex-basis: 10em;
}
#box-2 {
flex-basis: 20em;
}
简写 Shorthand
上面几个 flex 属性有一个简写方式。 flex-grow、flex-shrink和 flex-basis 属性可以在 flex中一并设置。
例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。
属性的默认设置是 flex: 0 1 auto;。
#box-1 {
flex: 2 2 150px;
}
#box-2 {
flex: 1 1 150px;
}
重新排列 Rearrange
order 属性告诉 CSS flex 容器里子元素的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。 这个属性接受数字作为参数，可以使用负数。
#box-1 {
order: 2;
}
#box-2 {
order: 1;
}
子元素对齐方式 Align
align-self。 这个属性允许调整单个子元素自己的对齐方式，而不会影响到全部子元素。 因为 float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。
align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。
#box-1 {
align-self: center;
}
#box-2 {
align-self: flex-end;
}
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
