一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

了解CSS中Flex布局【带可使用案例】

Flex布局

Flex理解

Flex 布局是一种强大的 CSS 布局模型,用于构建灵活的、响应式的布局结构。它提供了更加简洁、强大的方式来控制元素在容器中的排列、对齐和分布。

灵活的方向性布局

  • Flex 布局通过定义主轴交叉轴来决定元素的排列方向。主轴是 Flex 容器的主要方向,而交叉轴则垂直于主轴
  • flex-direction 控制 Flex 容器的主轴方向。
  • justify-contentalign-items 分别用于控制子项在主轴和交叉轴上的对齐方式。

自适应、响应式布局

  • 子项的尺寸可以根据可用空间自动调整,使得布局更具弹性。
  • flex 属性: 可以指定子项的相对大小,使得它们在容器中按照比例分配空间。
  • flex-wrap 允许子项在容器内换行,实现多行布局。

对齐和间距控制

  • justify-content 控制子项在主轴上的对齐方式,如居中、两端对齐等。
  • align-itemsalign-self 控制子项在交叉轴上的对齐方式。
  • gap 简化了在 Flex 容器中设置子项之间间距的方式。

适用于复杂布局

  • 嵌套: 可以嵌套多个 Flex 容器,创建更复杂的布局结构。
  • Flex 容器与 Flex 子项: 容器内的子项可以灵活地响应布局变化。

相关容器属性

flex布局的容器属性有如下6种:

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

flex-direction

flex-direction 属性为设置flex布局主轴的方向,即我们option的排列顺序

属性值 含义
row 默认值, 设置主轴为水平方向, 从左往右排列
row-reverse 设置主轴为水平方向, 从右往左排列
column 设置主轴为垂直方向, 从上往下排列
column-reverse 设置主轴为垂直方向, 从下往上排列

flex-warp

flex-warp 属性为设置一条轴线排不下option时,进行换行处理

属性值 含义
nowrap 默认值, 表示不换行
wrap 换行
wrap-reverse 换行, 在下方第一行

flex-flow

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

.app{
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

justify-content 属性为设置option在主轴上的对齐方式

属性值 含义
flex-start 默认值,从头部开始,如果主轴是x轴,则从左到右
flex-end 从尾部开始排列
center 从主轴居中对齐,如果主轴是x轴则水平居中
space-between 平分剩余空间(每个option的间距相同)
space-around 平分剩余空间(若两边离边界的距离值为x,那么option的间距为2x)

align-items

align-items 属性为设置option在单条轴线时在交叉轴上的对齐方式

属性值 含义
stretch 默认值
baseline 项目的第一行文字的基线对齐
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐

align-content

align-items 属性为设置option在多条轴线时在交叉轴上的对齐方式

属性值 含义
stretch 默认值
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
space-between 两端对齐,平分剩余空间(每个option的间距相同)
space-around 平分剩余空间(若两边离边界的距离值为x,那么option的间距为2x)
space-evenly 平分剩余空间(若两边离边界的距离值为x,那么option的间距也为x)

容器属性的组合使用

原文链接:https://juejin.cn/post/7312658500144185344 作者:壹鸭壹呀

(0)
上一篇 2023年12月16日 上午10:58
下一篇 2023年12月16日 上午11:08

相关推荐

发表评论

登录后才能评论