likes
comments
collection
share

CSS Flex布局小记

作者站长头像
站长
· 阅读数 17

弹性盒子布局模型对早期浮动+定位布局的一种补充，经过多年的发展，如今在 PC 端和移动端都应用的非常广泛。

Flex Box是按行或按列布局元素的一维布局方法，用这种方式布局的方式称之为“弹性布局”。弹性体现在

基本概念

CSS Flex布局小记

学习 flex 弹性布局，主要就是学习弹性容器和弹性元素的几个属性。

弹性容器

定义一个 Flexbox 伸缩盒布局，需要在一个父级元素上使用 display属性的值：flex或inline-flex。这个父级元素将成为flex container（伸缩容器），而它的所有子元素将变成 flex item（伸缩元素）。

CSS Flex布局小记

flex-direction

弹性元素默认是沿着主轴方向依次排列。

flex-direction属性用来控制主轴的方向，可选值有：

  • row：默认值，主轴为从左到右的水平方向
  • column：主轴为从上到下的垂直方向
  • row-reverse：主轴为从右往左的水平方向
  • column-reverse：主轴为从下到上的垂直方向

justify-content

justify-content 属性决定了弹性元素在主轴方向的对齐和分布方式。可选值有：

  • flex-start：默认值，与主轴起点即 main start 对齐。
  • flex-end：与主轴终点即 main end 对齐。
  • center：居中对齐。
  • space-between：两端对齐，首尾两个弹性元素对齐，剩下的空间等分。
  • space-around：环绕对齐，每个弹性元素两侧都拥有相等的间距且互不干扰。最终的效果是容器两侧的空白，等于元素之间距离的一半。
  • space-evenly：等分对齐，每个弹性元素两侧的距离相等。

CSS Flex布局小记

align-items

align-items 属性决定了弹性元素在交叉轴方向的对齐和分布方式。可选值有：

  • stretch：默认值，如果弹性元素设置了高度，则使用其高度；如果未设置高度或设为 auto，则占满整个容器的高度。
  • flex-start：与交叉轴起点即 cross start 对齐。
  • flex-end：与交叉轴终点即 cross end 对齐。
  • center：居中对齐。
  • baseline：与flex容器的基准线对齐 。

CSS Flex布局小记

flex-wrap

flex-wrap 属性用来控制弹性元素是否换行。可选值有：

  • no-wrap：默认值，不换行，当元素铺满一行后会压缩自身空间而不换行。
  • wrap：当一行不够排列时，剩下的弹性元素将换行排列
  • wrap-reverse：在换行显示时，与上一行方向相反。

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

书写没有顺序，比如：

flex-flow: column wrap;
flex-flow: wrap-reverse column-reverse;

align-content

align-content 属性决定了弹性元素多行排列在交叉轴上的分布方式，用法与 justify-content 类似 。

  • stretch：默认值，每一行弹性元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。与 align-items 的 stretch 类似。
  • flex-start：与 cross start 对齐。
  • flex-end：与 cross end 对齐。
  • center：居中对齐。
  • space-between：上下两行两端对齐，剩下每一行元素等分剩余空间。
  • space-around：每一行元素上下都有独立不重叠的空白空间，效果是上下两端的空间是中间行与行间隔的一半。
  • space-evenly：每一行元素上下空间完全等分。

弹性元素

弹性容器的直接子元素，即为弹性元素，具有以下特点：

  • 不再区分是块级元素还是行内元素
  • 除了自身设置的 width，还可通过弹性元素属性去进行尺寸的伸缩

CSS Flex布局小记

order

order 属性决定了弹性元素的排列顺序，属性值为任意整数（正整数、负整数、 0）。

该属性的默认值为0，如果弹性元素都不设置 order 属性，则按照 html 的书写顺序排列；若有的设置了 order，则按照从小到大的顺序排列。

<div class="box">
    <div class="item item1">A</div>
    <div class="item item2">B</div>
    <div class="item item3">C</div>
    <div class="item item4">D</div>
</div>

CSS Flex布局小记

align-self

align-self 属性可设置单个弹性元素在交叉轴的对齐方式，会覆盖容器的 align-items 。

默认值为 auto，表示继承父元素的 align-items属性。

flex-grow

grow 是扩展的意思， flex-grow 属性用于设置元素在排列时如何扩展自身所占据的空间。

扩展的前提是所在的行或列仍有剩余空间。

属性值为非负数。默认为 0，表示保持原样，不扩展空间。可以为小数，整数。

如果有剩余空间，则将剩余空间总量认为是 1。

如果只有一个弹性元素设置了 flex-grow，值小于 1，则按比例计算出所占据的剩余空间。值大于等于1，则占满剩余空间。比如剩余空间 100px，一个元素设置了 0.5，则它自身的尺寸将扩展50px。

如果有多个弹性元素设置了 flex-grow，若总值小于 1，则按比例计算出各自所占据的剩余空间。若总值大于等于1，则按各自占总值的比例计算扩展的空间。

如果元素设置了 max-width，其优先级高于 flex-grow，也就是说扩展后的空间，不能超过 max-width。

flex-shrink

shrink 是收缩的意思，flex-shrink 属性用于决定弹性元素在排列时如何收缩自身所占据的空间。

收缩前提是所有弹性元素加起来的尺寸超过了弹性容器的尺寸。

属性值为为 0 表示弹性元素不进行收缩。

默认值为 1，表示当需要收缩空间时，按比例进行收缩。

如果元素设置了 min-width，其优先级高于 flex-shrink，也就是说收缩后的空间，不能小于 min-width。

flex-basis

flex-basic 属性用于设置弹性元素在分配剩余空间之前的大小。

默认值是auto，如果有设置 width则占据空间就是 width，没有设置则由内容撑开。

还可以设置为具体的数值，此时即使元素自身设置了 width 也以此值为准。比如：

width: 100px;
flex-basic: 200px;

最终元素的尺寸为 200 px。

flex 复合属性

复合属性即几个 CSS 属性合在一起写的属性，比如 background，transition 等属性。

flex 属性也是一个复合属性，是flex-grow，flex-shrink 和 flex-basis的缩写。

flex 属性可以指定1个， 2个或 3个值。 默认值是为 0 1 auto，也就相当于三个属性的默认值的集合：

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

flex 属性的值的设置很灵活，支持单值语法、双值语法和三值语法。

单值语法： 值必须为以下其中之一：

  • 一个没有单位的数字，它会被当作 flex:<number> 1 0;
  • 一个有效的宽度 width 值，相当于给 flex-basis 设置值。
  • 关键字 none，auto 或 initial。

双值语法: 第一个值必须为一个无单位数字，并且它会被当作 flex-grow 的值。第二个值必须为以下之一：

  • 一个无单位数字，会被当作 flex-shrink 的值。
  • 一个有效的宽度值，会被当作 flex-basis 的值。

三值语法：

  • 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
  • 第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
  • 第三个值必须为一个有效的宽度值，并且它会被当作 flex-basis 的值。

在做自适应布局时，通常会将需要自适应的元素设置为 flex: 1，其等效于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

表示该元素所占据的空间可以随着容器剩余空间的变化自动伸缩。

小结

本文介绍了弹性盒子布局的概念，和弹性容器、弹性元素的属性的用法。其中重点理解有关弹性容器的设置方法，主要是如何控制弹性元素在水平和垂直方向上的排列方式，在做一些居中对齐，自适应布局时使用 flex 布局非常方便快捷。