玩转 CSS Flexbox 弹性布局
1. 创建 flex 容器
给任何一个元素添加 display: flex;
就可以创建一个 flex 块级容器
属性 | 描述 |
---|---|
display: flex; | 创建 flex 块级容器 |
display: inline-flex; | 创建 flex 行内容器 |
<style>
.container {
background-color: #abcdef;
width: 100px;
height: 100px;
display: flex;
}
.item {
width: 150px;
height: 50px;
background-color: pink;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
</div>
<span class="container">
<div class="item">1</div>
<div class="item">2</div>
</span>
通过上面代码可以得出两个结论
1. 无论元素是什么类型,只要设置了 display: flex;
,该元素就会被设置为 flex 块级元素。span 上行内元素,不能设置宽高,因为被设置为了 flex 容器,所以上面代码中 span 元素也能被设置宽高
2. 子元素在主轴方向上排列时,如果超出了容器的宽度,会忽略自身的宽度,自适应容器宽度的变化。上面代码中子元素宽度被设定为 150px,但是实际展示的是 50px
2. 主轴方向与多行容器
设置容器的主轴方向和多行容器
属性 | 描述 |
---|---|
flex-direction | 设置主轴方向 |
flex-wrap | 设置多行容器 |
flex-flow | flex-direction 和 flex-wrap 的缩写 |
flex-direction 属性值
属性值 | 描述 |
---|---|
row | 主轴为水平方向(从左到右),默认值 |
row-reverse | 主轴为水平方向(从右到左) |
column | 主轴为垂直方向(从上到下) |
column-reverse | 主轴为垂直方向(从下到上) |
flex-wrap 属性值
属性值 | 描述 |
---|---|
nowrap | 不换行,项目宽度超出容器宽度时会忽略项目尺寸,默认值 |
wrap | 允许换行,项目宽度超出容器宽度时自动换行 |
flex-flow 属性值
flex-flow: 主轴方向 多行容器(是否换行);
属性值 | 描述 |
---|---|
flex-flow: row nowrap; | 主轴为水平方向且不换行,默认值 |
flex-flow: row wrap; | 主轴为水平方向且允许换行 |
flex-flow: column nowrap; | 主轴为垂直方向且不换行 |
flex-flow: column wrap; | 主轴为垂直方向且允许换行 |
3. 主轴项目对齐方式
只有一个属性: justify-content
,常用属性值如下表
属性值 | 描述 |
---|---|
flex-start | 所有项目与主轴起始线对齐【默认值】 |
flex-end | 所有项目与主轴终止线对齐 |
center | 居中对齐: 所有项目与主轴中间线对齐 |
space-between | 两端对齐: 剩余空间在头尾项目之外的项目间平均分配 |
space-around | 分散对齐: 剩余空间在每个项目两侧平均分配 |
space-evenly | 平均对齐: 剩余空间在每个项目之间平均分配 |
4. 交叉轴项目对齐方式
只有一个属性: align-items
,常用属性值如下表
属性值 | 描述 |
---|---|
flex-start | 所有项目与交叉轴起始线对齐【默认值】 |
flex-end | 所有项目与交叉轴终止线对齐 |
center | 居中对齐: 所有项目与交叉轴中间线对齐 |
特别注意: 单行容器中,交叉轴中只有一行项目,所有剩余空间不需要在项目间进行分配,因此没有像主轴对齐的三个属性值: space-between
, space-around
,space-evenly
5. 多行容器项目对齐方式
只有一个属性: align-content
,常用属性值如下表
属性值 | 描述 |
---|---|
stretch | 项目拉伸占据整个交叉轴【默认值】 |
flex-start | 所有项目与交叉轴起始线对齐 |
flex-end | 所有项目与交叉轴终止线对齐 |
center | 居中对齐: 所有项目与交叉轴中间线对齐 |
space-between | 两端对齐: 剩余空间在头尾项目之外的项目间平均分配 |
space-around | 分散对齐: 剩余空间在每个项目两侧平均对齐 |
space-evenly | 平均对齐: 剩余空间在每个项目之间平均分配 |
6. 单个项目在交叉轴上的的对齐方式
只有一个属性: align-self
,常用属性值如下表
属性值 | 描述 |
---|---|
auto | 继承 align-items 属性值【默认值】 |
flex-start | 与交叉轴起始线对齐 |
flex-end | 与交叉轴终止线对齐 |
center | 与交叉轴中间线对齐 |
stretch | 在交叉轴方向上拉伸 |
baseline | 与基线对齐(用的极少) |
7. 单个项目的排列顺序
order
属性
属性值 | 描述 |
---|---|
0 | 按照书写顺序排列【默认值】 |
n | 值越大,越靠后显示(值可正可负) |
8. 项目在主轴上的放大因子
flex-grow
属性
在主轴上存在剩余空间时,该属性才有意义。该属性的值称为放大因子,常见的属性值如下:
属性值 | 描述 |
---|---|
0 | 不放大,保持原值【默认值】 |
n | 放大因子(正整数) |
9. 项目在主轴上的缩小因子
flex-shrink
属性
在主轴上空间容纳不下所有项目时,flex-shrink
才有意意义,该属性的值称为缩小因子,常见的属性值如下:
属性值 | 描述 |
---|---|
1 | 允许缩小适应主轴空间变化【默认值】 |
0 | 不缩小,保持原始大小 |
n | 缩小因子,正整数 |
10. 项目在主轴上的计算基准尺寸
flex-basis
属性
1. 在分配多余空间之前,项目占据的主轴空间
2. 浏览器根据这个属性,计算主轴是否有多余空间
3. 该属性会覆盖项目原始大小(width/height
)
4. 该属性会被项目的 min-width,min-height
值覆盖
优先级: width/height < flex-basis < min-width/min-height
属性值 | 描述 |
---|---|
auto | 项目原来的大小【默认值】 |
px | 像素 |
% | 百分比 |
11. 项目缩放的简写
项目放大,缩小与计算尺寸,对于项目非常重要,也很常用。每次都要写这三个属性,非常的麻烦,且没有必要,flex 属性可以将上面三个属性简化,语法格式:
flex: flex-grow flex-shrink flex-basis;
三值语法:
属性值 | 描述 |
---|---|
第一个值:整数 | flex-grow |
第二个值:整数 | flex-shrink |
第三个值:有效宽度 | flex-basis |
举例
案例 | 描述 |
---|---|
flex: 0 1 auto; | 不放大,可收缩,初始宽度【默认值】 |
flex: 1 1 auto; | 项目自动放大或收缩适应容器 |
flex: 0 0 100px; | 按计算大小填充到容器中 |
双值语法:
属性值 | 描述 |
---|---|
第一个值:整数 | flex-grow |
第二个值:有效宽度 | flex-basis |
举例
案例 | 描述 |
---|---|
flex: 0 100px; | 禁止放大,按计算大小填充到容器中 |
单值语法:
属性值 | 描述 |
---|---|
整数 | flex-grow |
有效宽度 | flex-basis |
关键字 | initial,auto,none |
举例
案例 | 描述 |
---|---|
flex: 1 | flex: 1 1 auto |
flex: 180px | flex: 1 1 180px |
initial | flex: 0 1 auto 【默认值】 |
auto | flex: 1 1 auto |
none | flex: 0 0 auto |
相关文章
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- CSS 中的变量
- CSS overflow 内容溢出时的显示方式
- CSS font-family 属性设置字体
- CSS 控制内容显示行数
- flex 弹性布局常用属性
- CSS实现文字环绕图片和文字两端对齐
- CSS 边框属性总结
- position:sticky纯css实现粘性定位让元素滚到顶部固定
- css linear-gradient实现背景渐变色
- css页面内容不够高footer始终位于页面底部
- HTML-CSS-JS Prettify 代码格式化插件
- 网页内容很少时让footer处于最下方
- css改变progress进度条颜色
- css transform实现图片旋转
- css -webkit-line-clamp有什么用?
- css实现超过两行变省略号
- css修改鼠标的颜色样式
- 前端框架Tailwind CSS用法
- CSS布局:完全掌握position属性