首页 > 其他分享 >CSS:弹性布局(display:flex)

CSS:弹性布局(display:flex)

时间:2024-07-18 11:40:24浏览次数:12  
标签:flex Flex 子项 主轴 wrap 对齐 display CSS

道友请了~ 最近小道在修练主修功法《嘉蛙》之余,偶然从一名散修手中得到了一本《CSS秘籍》,刚好近期有自己做微信小程序的打算,这不是瞌睡了给递枕头么。欣喜若狂,翻开第一章,拜读之后受益匪浅。韩老魔说过:好记性不如烂笔头。(韩老魔:我没说过!)遂誊抄一份,分享给各位道友。

@

目录

弹性布局的设计理念是让容器能够根据空间的变化自动调整其子元素的大小和位置,从而在不同屏幕尺寸和设备上创建响应式和适应性强的界面。

Flex 布局的核心概念包括:

  1. 容器 (Flex Container): 当一个元素的 display 属性被设置为 flexinline-flex 时,这个元素就变成了一个 Flex 容器。这将改变其默认的布局行为,使其遵循 Flex 布局规则。
  2. 子项 (Flex Items): Flex 容器的所有直接子元素都自动成为 Flex 子项,它们将根据容器的 Flex 属性进行布局。
  3. 主轴 (Main Axis): 这是 Flex 容器中默认的方向,可以是水平或垂直,取决于 flex-direction 属性的值。Flex 子项沿主轴排列。
  4. 交叉轴 (Cross Axis): 这是与主轴垂直的方向。当 Flex 子项堆叠在主轴上时,交叉轴决定了子项的层叠顺序。

容器的属性

justify-content:控制主轴上的子项对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items:控制交叉轴上的子项对齐方式。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-direction:定义主轴的方向,即子元素的主要排列方向

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap:是否换行及换行的方向

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(默认):不换行
  • wrap:换行,第一行在上方
  • wrap-reverse:换行,第一行在下方

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

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

flex-flow:flex-direction 和 flex-wrap 的简写形式

  • 这是 flex-directionflex-wrap 的简写形式,例如 flex-flow: row wrap;

通过组合使用这些属性,你可以创建出复杂而灵活的布局,适应不同的屏幕尺寸和内容需求。

标签:flex,Flex,子项,主轴,wrap,对齐,display,CSS
From: https://www.cnblogs.com/GilbertDu/p/18309197

相关文章

  • CSS总结
    目录1.引入规则1.1行内样式1.2内联样式1.3外部样式2.css选择器2.1基本选择器2.2关系选择器2.3属性选择器2.4复合选择器2.5伪类选择器2.5.1超链接伪类2.5.2表单伪类2.5.3结构伪类2.6伪元素选择器3.css样式3.1背景样式3.2字体样式3.3列表样式3.4内外边距3.5......
  • 当 SCSS 编译出现错误时,有哪些常见的排查和解决方法?
    当SCSS编译出现错误时,可以按照以下常见的排查和解决方法进行处理:检查错误提示:查看错误提示信息,并仔细阅读错误消息,以了解错误的原因。检查拼写错误:检查代码中是否存在拼写错误,比如拼写错误的变量名或混合器名。确认语法错误:验证代码的语法是否正确,比如缺少分号、花......
  • 如何在团队协作中确保 SCSS 代码风格的一致性和规范性?
    确保SCSS代码风格的一致性和规范性在团队协作中非常重要。下面是一些方法可以帮助实现这一目标:使用代码风格指南:制定并共享SCSS代码风格指南,确保团队成员在编写代码时遵循统一的规范。这可以包括命名约定、缩进、代码布局等方面。代码审查:在团队中进行代码审查是确......
  • 【Rust】使用日志记录利器flexi_logger
    Flexi_logger简介​flexi_logger​是一个功能强大且灵活的日志记录库,用于Rust语言的应用程序。它提供了丰富的配置选项和功能,适用于各种日志记录需求,从简单的控制台输出到复杂的文件日志管理。以下是对flexi_logger​的一些关键功能和特性的简介:主要功能多种日志目标:支持将日......
  • CSS初学自用1
    一、CSS的简介CSS(CascadingStyleSheets,层叠样式表),是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,CSS文件扩展名为.css。CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可......
  • css常用属性
    一、边框的属性border-width:简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。border-color:设置边框颜色。border-style:设置边框类型。属性值:  none    定义无边框。  hidden   与"none"相同。不过应用于表时除外,对于表,hidden用......
  • 【Python】CSS与选择器
        ......
  • 在 Selenium 中,常见的元素定位方式有 ID、name、class_name、tag_name、link_text、pa
    在Selenium中,常见的元素定位方式有ID、name、class_name、tag_name、link_text、partial_link_text、XPath和CSS等。这些定位方式在不同的情况下都有各自的优缺点,以下是一些可能较为保险的元素定位方式:ID定位:通过元素的ID属性来定位元素。如果元素有唯一的ID,那么这......
  • CSS Case Insensitive Attribute Selector All In One
    CSSCaseInsensitiveAttributeSelectorAllInOneCSS大小写敏感的属性选择器/*casesensitive,onlymatches"case_sensitive"*/[class=case_sensitive]{background:pink;}Addingaspacebeforetheiflagtotheattributeselectorbracketswillmak......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript广东传统文化
    HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......