Flexible Box

379 阅读3分钟

flex 是什么

CSS 弹性盒子布局(Flexible Box/flexbox)是一种\color{red}{一维}的布局模型,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。

说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout,可以同时处理行和列上的布局。

flexbox 的两根轴线

主轴

主轴由 flex-direction 定义

flex-direction 有四个可选值

  • row (水平方向,通常从左到右排列)
  • row-reverse (水平方向,通常从右到左排列)
  • column (垂直方向,通常从上到下排列)
  • column-reverse (垂直方向,通常从下到上排列)

通常 是因为排列方向会因书写模式的影响

实例

交叉轴

垂直于主轴的轴

起始线和终止线

即指排列方向(受到书写模式的影响)

Flex 容器

把一个容器的 display 属性值改为 flex 或者 inline-flex。 Flex 容器的直接子元素就成了flex元素,默认具有如下行为:

  • 元素排列为一行 (flex-direction 属性的初始值是 row)。
  • 元素从主轴的起始线开始。
  • 元素\color{red}{不会在主维度方向拉伸,但是可以缩小}
  • 元素被\color{red}{拉伸来填充交叉轴大小}
  • flex-basis 属性为 auto。
  • flex-wrap 属性为 nowrap。

Flex 容器 与 flex 元素的默认行为

Flex 容器属性: flex-direction

Flex 容器属性: flex-wrap

flex-wrap 默认值 no-wrap

flex-wrap: wrap

简写属性 flex-flow

flex-flow 是 flex-direction 和 flex-wrap 组合 flex-flow: row no-wrap; 第一个指定的值为 flex-direction ,第二个指定的值为 flex-wrap.

可用空间

\color{red}{可用空间 = Flex 容器的大小 - 直接子元素的大小总和}

image.png

Flex 容器属性: flex-basis

flex-basis 定义了该元素的空间大小,取 width 的值,当没有设置width时,默认为auto,大小由直接子元素的大小决定

Flex 容器属性: flex-grow

flex-grow 值为一个正整数,按一定比例分配可用空间

flex-grow

Flex 容器属性: flex-shrink

flex-shrink 属性是处理flex元素收缩的问题,可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下

flex-shrink

Flex属性的简写

Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow,flex-shrink,flex-basis

image.png

Flex 容器属性: justify-content

justify-content属性用来使元素在主轴方向上对齐 初始值是flex-start,元素从容器的起始线排列

  • stretch
  • flex-start (元素从容器的起始线排列)
  • flex-end (元素从容器的起始线排列)
  • center (中间排列)
  • space-around (每个元素的左右空间相等)
  • space-between (元素排列好之后的剩余空间拿出来,平均分配到元素之间,所以元素之间间隔相等)

Flex 容器属性: align-items

align-items 属性可以使元素在交叉轴方向对齐 这个属性的初始值为stretch,这就是为什么flex元素会默认被拉伸到最高元素的高度

  • stretch(拉伸到最高元素的高度)
  • flex-start(flex容器的顶部对齐)
  • flex-end (flex容器的下部对齐)
  • center (flex容器的中部部对齐)

Flex 容器属性:align-content

align-content 只对 flex-wrap: wrap;的 Felx 容器起作用 align-self

flex 元素属性:align-self

align-self 覆盖已有的 align-items 的值 developer.mozilla.org/zh-CN/docs/…

flex 元素属性:order

order 属性规定了弹性容器中的可伸缩项目在布局时的顺序

代码示例

【笔记不易,如对您有帮助,请点赞,谢谢】