Flex容器入门

已于 2024-10-10 17:09:19 修改
阅读量731 收藏 24
点赞数 26
分类专栏： 前端学习手册 文章标签： 前端 css
于 2024-10-10 16:14:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43796194/article/details/142823939
版权

Flex容器是采用Flexbox布局的父元素，它控制其子元素的排列和对齐方式。

基本概念

Flexbox，全称 Flexible Box 布局模型，是一种用于一维布局的 CSS 技术。它允许开发者在容器内灵活地分配空间给子元素，并轻松地对齐这些元素。

常见的应用场景

应用场景描述
响应式布局Flexbox 可以创建灵活的布局，使得网页能够适应不同屏幕尺寸和分辨率。
导航栏使用 Flexbox 可以轻松地创建水平导航栏，并且能够对齐和分配空间给导航项。
卡片布局卡片视图通常需要等高或等宽的布局，Flexbox 可以轻松实现这种效果。
网格布局虽然 CSS Grid 布局更适合二维布局，但 Flexbox 仍然可以用来创建简单的网格布局。
动态内容区域对于内容大小不固定的元素，Flexbox 可以自动调整它们的大小以适应可用空间。
对齐元素Flexbox 提供了多种对齐方式，可以轻松地在容器内对齐文本、图片或其他元素。
多列布局虽然传统的多列布局使用 column-count 属性，但 Flexbox 也可以用于创建多列布局。
订单和排序Flexbox 允许开发者动态地改变元素顺序，而不需要更改 HTML 结构。
自适应布局Flexbox 可以根据浏览器窗口大小的变化自动调整布局，实现真正的自适应设计。
溢出隐藏当内容超出容器大小时，Flexbox 可以轻松实现内容的溢出隐藏。
空间分布Flexbox 可以均匀地在元素之间分配空间，或者将空间集中在特定元素。
复杂布局对于更复杂的布局，如聊天应用的对话列表、仪表板等，Flexbox 提供了一种相对简单的解决方案。
交互式界面在需要动态调整布局的交互式界面中，Flexbox 可以响应用户操作，如调整大小、切换标签页等。

Flex容器属性

justify-content

用于水平分配项目之间和项目周围的空间。

属性值/描述代码示例效果
center
居中对齐
.container { 
  display: flex; 
  justify-content: center; 
  ... 
} 
.block { 
  width: 50px; 
  height: 50px; 
  background-color: black; 
}
center
flex-start（默认）
默认值，左对齐
.container { 
  display: flex; 
  justify-content: flex-start; 
  ... 
}
flex-start
flex-end
右对齐
.container { 
  display: flex; 
  justify-content: flex-end; 
  ... 
}
flex-end
space-between
两端对齐
.container { 
  display: flex; 
  justify-content: space-between; 
  ... 
}
space-between
space-around
项目之间的间隔是项目与Flex容器边缘间隔的两倍
.container { 
  display: flex; 
  justify-content: space-around; 
  ... 
}
space-around
space-evenly
项目之间的间隔与Flex容器边缘的间隔相等
.container { 
  display: flex; 
  justify-content: space-evenly; 
  ... 
}
space-evenly

align-items

用于垂直分配项目之间和项目周围的空间。

  • 如果容器是水平的（主轴为行），则align-items 将影响子元素的垂直对齐方式；
  • 如果容器是垂直的（主轴为列），则 align-items 将影响子元素的水平对齐方式；
  • flex-direction影响容器是水平还是垂直。
属性值/描述代码示例效果
center
居中对齐
.container { 
  display: flex; 
  align-items: center; 
  ... 
} 
.block { 
  width: 50px; 
  height: 50px; 
  background-color: black; 
}
center
flex-start
容器头部对齐
.container { 
  display: flex; 
  align-items: flex-start; 
  ... 
}
flex-start
flex-end
容器尾部对齐
.container { 
  display: flex; 
  align-items: flex-end; 
  ... 
}
flex-end
baseline
基线对齐
.container { 
  display: flex; 
  align-items: baseline; 
  ... 
} 
.block1 { 
  width: 50px; 
  height: 80px; 
  background-color: black; 
} 
.block2 { 
  width: 50px; 
  height: 50px; 
  background-color: white; 
}
baseline
stretch
在未设置高度情况下，将占满容器的高度
.container { 
  display: flex; 
  align-items: stretch; 
  ... 
} 
.block1 { 
  width: 50px; 
  background-color: black; 
} 
.block2 { 
  width: 50px; 
  background-color: white; 
}
stretch

flex-direction

用于指定项目的方向，并且会影响容器是水平还是垂直方向（会影响align-items的使用）。

属性值/描述代码示例效果
row（默认）
容器为水平方向，从左到右
.container { 
  display: flex; 
  flex-direction: row; 
  ... 
} 
.block { 
  ... 
}
row
row-reverse
容器为水平方向，从右到左
.container { 
  display: flex; 
  flex-direction: row-reverse; 
  ... 
} 
...
row-reverse
column
容器为垂直方向，从上到下
.container { 
  display: flex; 
  flex-direction: column; 
  ... 
} 
...
column
column-reverse
容器为垂直方向，从下到上
.container { 
  display: flex; 
  flex-direction: column-reverse; 
  ... 
} 
...
column-reverse

order

用于指定项目相对于同一容器内其余项目的顺序。

<view class="container">     
  <view class="block1">1</view>     
  <view class="block2">2</view>     
  <view class="block3">3</view> 
</view>
CSS效果
.container { 
  display: flex; 
  ... 
} 
.block1 { 
  order: 3; 
  ... 
} 
.block2 { 
  order: 1; 
  ... 
} 
.block3 { 
  order: 2; 
  ... 
}
 Flex Order Example

align-self

用于单独指定某一项目为其他项目不一样的对齐方式。（项目属性可以覆盖父容器设置的 align-items 属性）

属性值/描述代码示例效果
center
居中对齐
.container { 
  display: flex; 
  align-items: flex-start; 
  ... 
} 
.block1 { 
  align-self: center; 
  ... 
} 
.block2 { 
  ... 
}
center
flex-start
容器头部对齐
.container { 
  display: flex; 
  align-items: center; 
  ... 
} 
.block1 { 
  align-self: flex-start; 
  ... 
} 
.block2 { 
  ... 
}
flex-start
flex-end
容器尾部对齐
.container { 
  display: flex; 
  align-items: center; 
  ... 
} 
.block1 { 
  align-self: flex-end; 
  ... 
} 
.block2 { 
  ... 
}
flex-end
stretch
在未设置高度情况下，将占满容器的高度
.container { 
  display: flex; 
  align-items: center; 
  ... 
} 
.block1 { 
  align-self: stretch; 
  width: 50px; 
  ... 
} 
.block2 { 
  width: 50px; 
  height: 50px; 
  ... 
}
stretch

flex-wrap

用于指定当项目在容器中一行无法显示的时候如何处理。

属性值/描述代码示例效果
nowrap（默认）
不换行
.container { 
  display: flex; 
  flex-wrap: nowrap; 
  ... 
} 
.block { 
  ... 
}
nowrap
wrap
正常换行，第一个位于第一行的第一个
.container { 
  display: flex; 
  flex-wrap: wrap; 
  ... 
} 
...
wrap
wrap-reverse
反向换行
.container { 
  display: flex; 
  flex-wrap: wrap-reverse; 
  ... 
} 
...
wrap-reverse

align-content

注意与align-items不同，align-content影响的是行与行之间的间隔。

align-items与align-content的区别
  • 作用对象：align-items 对单个子元素起作用，align-content 对行（子元素组）起作用。
  • 使用场景：align-items 用于单行或单列布局，align-content 用于多行布局。
  • 对齐方式：两者都可以使用 flex-start、flex-end、center 等值，但 align-content 还支持 space-between、space-around 等值，用于控制行与行之间的间距。
属性值/描述代码示例效果
center
居中对齐
.container { 
  display: flex; 
  flex-wrap: wrap; 
  align-content: center; 
  ... 
} 
.block { 
  ... 
}
center
flex-start（默认）
默认值，左对齐
.container { 
  display: flex; 
  flex-wrap: wrap; 
  align-content: flex-start; 
  ... 
} 
...
flex-start
flex-end
右对齐
.container { 
  display: flex; 
  flex-wrap: wrap; 
  align-content: flex-end; 
  ... 
} 
...
flex-end
space-between
两端对齐
.container { 
  display: flex; 
  flex-wrap: wrap; 
  align-content: space-between; 
  ... 
} 
...
space-between
space-around
项目之间的间隔是项目与Flex容器边缘间隔的两倍
.container { 
  display: flex; 
  flex-wrap: wrap; 
  align-content: space-around; 
  ... 
} 
...
space-around

混合使用案例

核心样式效果
justify-content: center;
align-items: center;
justify-content: flex-end;
flex-direction: column;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
flex-direction: column-reverse;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
justify-content: center;
align-content: flex-end;
justify-content: space-around;
flex-direction:column-reverse;
align-items: flex-end;
justify-content: center;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: center;
A_nn
关注
专栏目录
flex弹性容器入门
qq_18398239的博客
06-18 460
Flex 弹性容器入门 容器属性 flex-flow flex-direction flex-wrap justify-content align-items align-content 元素属性 order flex-grow flex-shrink flex-basis flex align-self 就连老外也都在twitter吐槽不好理解，可见还是有一定的学习成本。 而目前很多flex教程...
flex 布局基础入门
m0_56966142的博客
02-19 505
一、flex 布局基础 1.1 flex 布局与传统布局 优缺点 传统布局 flex布局 兼容性好 操作方便，布局简单，移动端应用广泛 布局繁琐 PC端浏览器支持 1.2 flex 布局原理 1. 概述 flex 是 flexible Box 的缩写，意为"弹性布局"， 用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。 Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度
什么是Flex容器和Flex项目
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-04 874
基本概念Flex容器Flex项目示例一：基本的Flex容器和项目HTML结构CSS样式代码解析示例二：改变Flex容器的方向CSS样式代码解析示例三：控制Flex项目的大小CSS样式代码解析示例四：添加自适应的边距CSS样式代码解析示例五：响应式布局CSS样式代码解析功能使用思路在不同场景下的应用1. 响应式网格布局2. 对齐和对齐方式3. 自动填充剩余空间实际开发中的技巧在现代Web开发中，布局是一项至关重要的任务。CSS Flexbox（弹性盒子）布局模块提供了强大的工具来创建灵活且易于管理的布局。
flex 布局 入门
阿豪
02-03 64
原文链接: flex 布局 入门 上一篇: ...
flex布局入门讲解
qq_51558433的博客
07-29 534
flexitem。
Flex 布局快速入门
反正你猜不到我是谁
03-18 1703
flex布局详解 说明 flex 布局是CSS3中新增加的一套布局方案，属于一维布局模型。flex提供了强大的空间分布和对齐能力。 想要理解和使用flex进行网页布局，需要先来学习和理解下面的几个概念： flex的两根轴线: 主轴和交叉轴 flex容器和flex子元素 基本概念的解释 flex的两根轴线 当使用flex进行布局的时候，首先需要了解的，就是flex的两根轴线：主轴和交叉轴。 为什么一定要理解这两个轴线呢，因为所有的flex属性都和这两根轴线有关系。 一般来说，元素在容器内部排列的顺序
flex布局快速入门
_
01-31 1561
原文链接 : https://lz5z.com/FlexLayoutLearning/ 什么是 flex 布局 传统布局的核心是盒子模型，依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左对齐，右对齐这样的功能，可以说，传统布局更适合于文字排版。 flex 是 flexible Box 的缩写，可以看做弹性的盒子模型。 flex 用法 使用 flex 首先要设置父元素display: flex。任何元素都可以指定为 fle.
CSS flex布局入门
web前端开发
09-29 197
来源 |https://www.jianshu.com/p/1e40b1d3f20b一、 why flex都知道html正常的文档流是自上而下排列的，块级元素会像下左图...
快速入门Flex布局
任性的wo的博客
03-08 612
参考文档： Flex 布局教程：语法篇(阮一峰) Flex 布局教程：实例篇(阮一峰) 在线flex布局样式演示 Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性盒子"，用来为盒状模型提供最大的灵活性 注意：设为Flex布局以后，子元素的float、clear和vertacal-align属性将失效 基本概念 采用Flex布局的元素，称为Flex...
详解CSS中的flex容器与flex属性
09-24
本文将详细讲解CSS中的flex容器与flex属性，这些都是CSS入门学习的基础。 **1. Flex容器** Flex容器是通过设置`display`属性的值为`flex`或`inline-flex`来定义的。这是CSS3引入的新特性，允许父元素（flex容器）...
Flex从入门到精通源代码
02-28
7. **图形和动画**：使用Flex制作动态效果和图形，可能包括基本的动画制作和DisplayObject容器的使用。 8. **应用程序结构**：讲解MVC（模型-视图-控制器）或其他设计模式在Flex开发中的应用，帮助组织和管理代码。...
Flex教程大全 flex快速入门
06-17
### Flex教程大全：Flex快速入门 #### 一、Flex简介 Flex是由Adobe公司推出的一款用于构建Web应用程序的技术框架。它允许开发者使用MXML（一种基于XML的语言）和ActionScript（一种面向对象的脚本语言）来进行高效...
Vue根实例、实例总结
m0_54007573的博客
10-04 666
Vue根实例、实例总结
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 292
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1319
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
前端--深入了解es6语法
最新发布
weixin_50559423的博客
10-10 457
ECMAScript是JavaScript的。
使用浏览器原生API实现录屏功能
m0_51431448的博客
10-10 51
本地开发环境中使用正常没问题，但是在生产环境中可能会报错，原因是因为navigator.mediaDevices为undefined了，其实除了navigator.mediaDevices，navigator.clipboard.writeText(‘复制的文本’) 这个复制到剪切板的API也是同样的问题。出现这些问题的原因是浏览器这些自带的一些API都有局限性，可能是为了安全考虑，只有在。好早之前写了个小deme，本来都忘了，现在无意中又翻出来了，所以也来记录一下吧！或者直接先不用图片都可以。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值