面试题:CSS基础flex布局

前言

Flex布局是一种用于网页布局的CSS模块,全称为Flexible Box Layout Module。 Flex布局通过使用容器和项目来创建灵活的、自适应的页面布局。在Flex布局中,容器是指应用Flex布局的父元素,而项目则是指容器内的子元素。

主轴性质

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

容器的属性

以下是一些常用的Flex布局属性:

  • flex-direction:确定主轴的方向,可以是水平方向(row)或垂直方向(column)。
  • justify-content:定义项目在主轴上的对齐方式。
  • align-items:定义项目在交叉轴上的对齐方式。
  • flex-wrap:控制项目是否换行显示。
  • flex-grow:定义项目在剩余空间中的放大比例。
  • flex-shrink:定义项目在空间不足时的缩小比例。

flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

sql 复制代码
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

css 复制代码
.box {
 flex-flow: <flex-direction> || <flex-wrap>;

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

sql 复制代码
.box {
 justify-content: flex-start | flex-end | center | space-between | space-around;
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

sql 复制代码
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

arduino 复制代码
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

如觉得本文对你有帮助的话,欢迎点赞❤❤❤,写作不易,持续输出的背后是无数个日夜的积累,您的点赞是持续写作的动力,感谢支持

相关推荐
三翼鸟数字化技术团队几秒前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei29 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码37 分钟前
Spring Task 定时任务
java·前端·spring
转转技术团队38 分钟前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
原生高钙1 小时前
LLM大模型对话框实践:大文件的分片上传
前端
加兵柠檬水1 小时前
代码输出题,会这些就够了。
前端