弹性布局(Flexbox)是一种现代化的 CSS 布局方法,它可以让您更方便地创建响应式和动态布局。在本篇文档中,我们将介绍弹性布局的基本概念以及如何在项目中使用它。

一、基本概念

  1. 容器(Container):弹性布局由一个容器组成,这个容器负责对其子元素进行排列和对齐。要创建弹性容器,请在 CSS 中将 display 属性设置为 flex 或 inline-flex
 
.container {
  display: flex;
}
  1. 项目(Item):容器中的子元素被称为项目。项目可以是任何 HTML 元素,例如文本、图片或其他标签。

二、弹性布局属性

1. 容器的属性

  • flex-direction:设置项目在容器中排列的方向。可选值:row(默认),row-reversecolumncolumn-reverse
 
.container {
  flex-direction: row;
}
  • flex-wrap:设置项目是否换行。可选值:nowrap(默认),wrapwrap-reverse
 
.container {
  flex-wrap: wrap;
}
  • flex-flowflex-direction 和 flex-wrap 的简写属性。
 
.container {
  flex-flow: row wrap;
}
  • justify-content:设置项目在主轴上对齐的方式。可选值:flex-start(默认),flex-endcenterspace-betweenspace-around
 
.container {
  justify-content: center;
}
  • align-items:设置项目在交叉轴上对齐的方式。可选值:flex-startflex-endcenterbaseline(默认),stretch
 
.container {
  align-items: center;
}
  • align-content:设置多行项目在交叉轴上对齐的方式。可选值:flex-startflex-endcenterspace-betweenspace-aroundstretch(默认)。
 
.container {
  align-content: center;
}

2. 项目的属性

  • order:设置项目的排列顺序。数值越小,排列越靠前,默认为 0。
 
.item {
  order: 1;
}
  • flex-grow:设置项目的放大比例。默认为 0,即如果存在剩余空间,也不放大。
 
.item {
  flex-grow: 1;
}
  • flex-shrink:设置项目的缩小比例。默认为 1,即如果空间不足,该项目将缩小。
 
.item {
  flex-shrink: 0;
}
  • flex-basis:设置项目在主轴方向上的初始大小。可以是长度值(如 200px)或百分比(如 50%),默认值为 auto
 
.item {
  flex-basis: 200px;
}
  • flexflex-growflex-shrink 和 flex-basis 的简写属性。
 
.item {
  flex: 1 1 200px;
}
  • align-self:允许单个项目覆盖容器的 align-items 属性。
 
.item {
  align-self: flex-start;
}

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部