Flex弹性布局

by · 2018年03月17日 · 2025 Words · ~5min reading time | Improve on

Flexbox布局是如何工作的 – 用大彩图和GIF动画解释
 更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释
flex 布局很容易与其他布局方式（包括 flex 布局）嵌套在一起，实际上它是一个独立的盒子，这个盒子由一个元素（称为容器）及其直接的子元素（称为项目）构成。这个容器外部以及这些项目内部都不会受 flex 布局的影响。
一个元素可以定义成两种 flex 布局，第一种是块级 flex 布局：
.flex-block-box {
display: flex;
}
另一种是行内 flex 布局：
.flex-inline-box {
display: inline-flex;
}
这两种 flex 布局的区别是，块级 flex 布局的容器是一个块级盒子（block），而行内 flex 布局的容器是一个行内盒子（inline-block）。

容器的属性主要用于排列和对齐项目，项目的属性主要用于实现弹性和覆盖容器所定义的对齐方式：

容器属性：
    排列：
        方向：flex-direction: row | column | row-reverse | column-reverse
        换行：flex-wrap: nowrap | wrap | wrap-reverse
        合写：flex-flow: row nowrap
    对齐：
        justify-content: flex-start | center | flex-end | space-between | space-around
        align-items: flex-start | center | flex-end | baseline | stretch
        align-content: flex-start | center | flex-end | space-between | space-around
项目属性：
    order: 0 | 1 | ...
    控制弹性：
        flex-grow: 0 | 1 | ...
        flex-shrink: 0 | 1 | ...
        flex-basis: auto | 100px | 50% | ...
        flex: 0 1 auto
            auto: 1 1 auto
            none: 0 0 auto
            initial: 0 1 auto
    align-self: auto | flex-start | center | flex-end | baseline | stretch

启动 flex-box：
父元素设置 display: flex; 或 display:inline-flex;
flex container：父元素显示设置 display: flex
flex item：flex container 中的子元素

flex 容器属性：

flex-direction：控制 flex 元素沿着 main-axis 的排列方向
    row：默认值，flex 元素沿着 main-axis 从左到右排列
    column：flex 元素将沿着 cross-axis 从上到下垂直排列
    row-reverse：flex 元素沿着 main-axis 从右到左排列
    column-reverse：flex 元素将沿着 cross-axis 从下到上垂直排列
flex-wrap： 指定 flex 元素单行显示还是多行显示 决定容器内项目是否可换行
    nowrap：默认值，flex 元素在 flex 容器内不换行排列
    wrap：flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值 相当于 start 或 before。cross-end 为 cross-start 的相对值
    wrap-reverse：和 wrap 的表现一样但是 cross-start 和 cross-end 交替排列
flex-flow：是 flex-direction 和 flex-wrap 的简写
justify-content：定义了浏览器如何分配顺着父容器 main-axis 的 flex 元素之间及其周围的空间
    flex-start：默认值，flex 元素靠 main-axis 开始边缘（左对齐）
    flex-end：所有 flex 元素靠 main-axis 结束边缘（右对齐）
    center：所有 flex 元素排在 main-axis中间（居中对齐）
    space-between：除了第一个和最一个 flex 元素的两者间间距相同（两端对齐）
    space-around：让每个 flex 元素具有相同的空间
align-items：以与 justify-content 相同的方式在侧轴方向上将当前行上的 flex 元素对齐
    stretch：默认值，让所有的 flex 元素高度和 flex 容器高度一样
    flex-start：让所有 flex 元素靠 cross-axis 开始边缘（顶部对齐）
    flex-end：让所有 flex 元素靠 cross-axis 结束边缘（底部对齐）
    center：让 flex 元素在 cross-axis 中间（居中对齐）
    baseline：让所有 flex 元素在 cross-axis 上沿着他们自己的基线对齐
align-content：定义弹性容器的侧轴方向上有额外空间时，如何排布每一行，当弹性容器只有一行时无作用
    stretch：默认值，拉伸 flex 元素，让他们沿着 cross-axis 适应 flex 容器可用的空间
    flex-start：让多行 flex 元素靠 cross-axis开始边缘，沿着 cross-axis 从上到下排列，flex 元素在 flex 容器中顶部对齐
    flex-end：让多行 flex 元素靠着 cross-axis 结束位置，让 flex 元素沿着Cross-Axis从下到上排列，即底部对齐
    center：让多行 flex 元素在cross-axis中间，在 flex 容器中居中对齐

flex 元素属性：

order：允许 flex 元素在一个 flex 容器中重新排序 类似 z-index
flex-grow：控制 flex 元素在容器有多余的空间如何放大（扩展）
flex-shrink：控制 flex 元素在容器没有额外空间又如何缩小
flex-basis：指定了 flex 元素在主轴方向上的初始大小
    auto：默认值，flex 元素宽度的计算是基于内容的多少来自动计算
    取任何用于 width 属性的任何值，比如 % || em || rem || px等
flex：flex-grow flex-shrink flex-basis 的速记
    flex: 0 1 auto; 默认行为
    flex: 0 0 auto; 相当于 flex: none; 它基本上是一个固定宽度的元素，其初始宽度是基于 flex 元素中内容大小
    flex: 1 1 auto; 相当于 flex: auto; 自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度
    flex: "positive number" 将 flex 元素的初始宽度设置为零，伸展元素以填满可用空间 并且最后只要有可能就收缩元素
align-self：整体对齐 flex 容器内的所有弹性项目，改变一个 flex 元素沿着侧轴的位置，而不影响相邻的 flex 元素
    auto：默认值，设置为父元素的 align-item 值，如果该元素没有父元素的话，就设置为 stretch
    flex-start：元素会对齐到 cross-axis 的首端
    flex-end：元素会对齐到 cross-axis 的尾端
    center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出
    baseline：所有的 flex 元素会沿着基线对齐
    stretch：将目标元素拉伸，以沿着 cross-axis 填满 flex 容器的可用空间，flex 元素高度和 flex 容器高度一样

Flex弹性布局

flex 容器属性：

flex 元素属性：

分类

标签云