flex弹性布局

最新推荐文章于 2024-07-21 21:06:06 发布

L_WalkingPig

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量231

点赞数

分类专栏： flex弹性布局文章标签： flex

原文链接：https://juejin.im/post/5c82a13b6fb9a049bb7d22c7

版权

flex弹性布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

flex弹性布局，以容器为基础进行弹性布局，使用 display:flex 创建flex容器。

例：
div{
    display:flex;
    width: 80%;
    height: 300px;
    background-color: pink;
    /* 默认的主轴是 x 轴 行 row  那么y轴就是侧轴喽 */
    /* 我们的元素是跟着主轴来排列的 */
    flex-direction:row; /* 表示内容直接横排列 */
}

flex-direction

flex-direction 属性决定主轴的方向。

一共有 4 个值row | row-reverse | column | column-reverse

row:是初始默认值。

row-reverse:将起点变为右边。

column: 主轴为垂直方向，起点在上面。

column-reverse: 主轴为垂直方向，起点在下面。

flex-wrap

指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

它一共有 3 个值nowrap | wrap | wrap-reverse，起始值是nowrap

nowrap:flex 的元素被摆放到到一行，这可能导致溢出 flex 容器

wrap:flex 元素被打断到多个行中

wrap-reverse和wrap的行为一样，但是cross-start和cross-end互换

flex-flow

flex-direction和flex-wrap的简写。默认是flex-flow: row nowrap;

justify-content

（行内排列，使浏览器分配顺着父容器主轴的弹性元素之间及其周围的空间）常用的属性有以下几个：

space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

space-around: 和space-between类似，但是每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

space-evenly: 和space-around类似，但是相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。

stretch: flex 子项的宽度和大于容器，则各个子项根据自己的大小缩放来撑满容器，如果子项和的最小宽度大于容器，则会撑开容器，如果和小于容器则相当于flex-start。

flex-start: 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。

flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

如果和`flex-direction: column;`结合，则会竖着排列。

align-items

flex-start:主轴在上。
flex-end:主轴在下。
center:主轴在中间。
stretch:元素在主轴之间。
baseline:主轴中分弹性元素。

align-content

定义了多根轴线（多行）的对齐方式。该属性对单行弹性盒子模型无效。

（即：带有flex-wrap: nowrap（该属性定义的是单行排列））。

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

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

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

space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch: 拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行（默认值）。

==============================================================

flex item （容器下的每个子元素，即伸缩项目）

flex-basis: flex-basis和min-width相似，指定了 flex 元素在主轴方向上的初始大小。（如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高的大小。）根据内部内容扩展项目的大小。如果不是，将使用默认基准值

flex-growc: 定义弹性盒子项（flex item）的拉伸因子，将相对于同一行上所有其他项目的大小总和进行缩放，这些项目将根据指定的值自动调整。它的值是number，负数无效。

flex-shrink: 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex: 它是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

order: 用来重新排列项目的自然顺序。元素按照order属性的值的增序进行布局。拥有相同order 属性值的元素按照它们在源代码中出现的顺序进行布局（ .item{ order:0 } ）

align-self: 会对齐当前 flex 行中的 flex 元素，并覆盖align-items的值. 如果任何 flex 元素的侧轴方向margin值设置为auto，则会忽略align-self。

以上为个人学习记录。

原文出处：掘金 ==> https://juejin.im/post/5c82a13b6fb9a049bb7d22c7

感谢原作者~