CSS之Flex弹性布局详解

云层之上
589 阅读5分钟

Flex Box（弹性盒子）

弹性盒子是 CSS3 的一种新的布局模式。提供了一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间，更简便、完整、响应式地实现各种页面布局。

还有更强大的Grid布局看这里。

比如内容居中就变得很简单：

.box {
  display: flex;
}
.container {
  margin: auto;
}

tip：本文探讨的是一些常用的定位属性值，一些溢出对齐、基线对齐等感兴趣的可以自行查阅mdn。

基本概念

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

使用了Flex布局的元素，称为弹性容器(Flex container)。对应的它的所有子元素自动成为弹性项目（Flex itme）。容器默认存在两根轴: 水平的主轴（main axis）和垂直的交叉轴（cross axis）(侧轴)。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

.box {
  display: flex;
  display: -webkit-flex;  /* Safari */
}

Snip20231211_2.png

注意一：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

所以：弹性盒子 = 弹性容器 + 弹性项目。

容器属性

容器属性有6个

flex-direction

主轴的方向水平或垂直（即项目的排列方向）。

语法：

flex-direction: row | row-reverse | column | column-reverse
属性值描述
row默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列
row-reverse主轴为水平方向（水平布局），起点在右端，从右向左排列
column主轴为垂直方向（垂直布局），起点在上沿，从上往下排列
column-reverse主轴为垂直方向（垂直布局），起点在下沿，从下往上

Snip20231211_3.png

flex-wrap

指定弹性盒子的子元素换行方式。

语法：

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
属性值描述
nowrap默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器
wrap弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse反转 wrap 排列

flex-flow

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

语法：

flex-flow: flex-direction flex-wrap;

justify-content

定义了项目在主轴上的对齐方式。

语法：

justify-content: flex-start | flex-end | center | space-between | space-around
属性值描述图示
flex-start默认值，沿主轴起点对齐（左对齐）Snip20231211_13.png
flex-end沿主轴终点点对齐 （右对齐）Snip20231211_14.png
center沿主轴居中Snip20231211_8.png
space-between两端对齐，项目之间的间隔都相等Snip20231211_10.png
space-around项目两侧的间隔相等，项目彼此之间的间隔是项目与边框的间隔的2倍Snip20231211_12.png
space-evenly项目均匀排列，彼此之间的间隔相等Snip20231211_16.png

align-items

定义项目在交叉轴上的对齐方式。

语法：

align-items: flex-start | flex-end | center | baseline | stretch;
属性值描述图示
flex-start交叉轴的起点对齐。Snip20231211_17.png
flex-end交叉轴的终点对齐Snip20231211_18.png
center交叉轴的居中对齐Snip20231211_20.png
baseline项目的第一行文字的基线对齐。图示中的文字没有居中Snip20231211_21.png
stretch如果项目未设置高度或设为auto，项目将沿轴线占满整个容器的高度；若项目设置高度，效果同flex-start。图示中item未设置高度Snip20231211_23.png

align-content

定义了交叉轴方向多根轴线的对齐方式，即多行情况下弹性盒子与容器位置的相对关系。如果项目只有一根轴线即单行情况，该属性不起作用。

属性值描述图示
flex-start交叉轴的起点对齐。Snip20231211_24.png
flex-end交叉轴的终点对齐Snip20231211_25.png
center交叉轴的居中对齐Snip20231211_26.png
space-between与交叉轴两端对齐，空白间距均分在所有项目之间Snip20231211_27.png
space-around沿交叉轴两侧的间隔相等，空白间距均分在所有项目两侧Snip20231211_28.png
space-evenly沿交叉轴均匀排列，所有项目和容器之间间距相等Snip20231211_29.png

项目属性

项目属性有6个

order

用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

语法：

.item {
    order: <integer>;
}

Snip20231211_30.png

flex-grow

定义定义项目元素的扩展比率，默认为 0 ，即如果存在剩余空间，也不放大。

示例一：

所有项目flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

Snip20231211_31.png

示例二：

所有项目flex-grow属性都为1，第一个项目的内容不一样。

Snip20231211_33.png

示例三： 将中间一个项目flex-grow属性设置为2： Snip20231211_34.png

flex-shrink

定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小，负值对该属性无效。

示例一： 所有项目flex-shrink属性都为1，即如果空间不足，该项目将缩小。

Snip20231211_35.png

示例二： 将中间一个项目flex-shrink属性设置为0，则空间不足时，该项目不缩小：

Snip20231211_36.png

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）的大小。默认值为auto，即项目的本来大小。

示例一： 设为跟width或height属性一样的值，则项目将占据固定空间。

Snip20231211_37.png

示例二： 设为百分比形式

Snip20231211_38.png

flex

  • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto（即在有剩余空间时，只放大不缩小）。后两个属性可选。
  • 两个快捷值auto (1 1 auto) 和 none (0 0 auto)。
  • flex: 1，相当于只设置了flex-grow
  • 建议优先使用flex属性，而不是单独写三个，因为浏览器会推算相关值。

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。用法除了auto，其他都与align-items属性完全一致。

语法：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

示例： 将第二个项目的align-self属性设置为flex-end

Snip20231211_39.png

个人的学习总结，有误的地方欢迎指正！

avatar
文章
阅读
粉丝