前端开发：CSS知识总结——弹性盒子（flex）

前端开发：CSS知识总结——弹性盒子（flex）

引用

CSDN

1.

https://m.blog.csdn.net/ydc222/article/details/127737247

Flexbox（弹性盒子）是CSS3中一种新的布局模式，它提供了一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配。本文将详细介绍Flexbox的基本概念、属性和用法，帮助开发者更好地掌握这一强大的布局工具。

一、什么是弹性盒子？

• 弹性盒子是CSS3的一种新的布局模式。
• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配
• 操作方便，布局简单，移动端使用广泛
• PC端浏览器支持情况较差
• IE11或更低版本中，不支持或部分支持
• 在盒模型中较为灵活
• 弹性盒模型的内容包括：弹性容器、弹性子元素——项目
• 原理：为父元素设置flex属性，控制子元素的位置及排列方式
• 应用场景 :移动端

二、设置弹性盒子——display属性

display: flex;将对象作为块级弹性伸缩盒显示
给容器盒子/父级标签设置弹性盒子属性
当子标签整体尺寸超过父级标签时 子标默认会缩小均分父级标签的控件
父级标签没有高度塌陷的问题
display: inline-flex;将对象作为内联块级弹性伸缩盒显示

注意：

将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效
弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

三、基本概念

flex容器、项目——弹性子元素
默认在容器中有两根轴线
默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）
默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外 一边就是侧轴
水平是主轴方向 垂直是交叉轴方向

四、排序方法

1.水平左对齐

justify-content: flex-start;

2.水平右对齐

justify-content: flex-end;

3.水平居中对其齐

justify-content:center;

4.水平方向 两边贴齐 中间留边距

justify-content: space-between;

5.水平方向 中间的边距比两边的边距多一倍

justify-content:space-around;

6.水平方向 元素间距离平均分配

justify-content:space-evenly;

五、弹性的交叉轴对齐

1.子元素交叉轴/垂直方向 上对齐

align-items: flex-start;

2.垂直方向居中对齐