Flexbox 弹性布局

最新推荐文章于 2023-06-20 01:19:45 发布

Night-Monkey

最新推荐文章于 2023-06-20 01:19:45 发布

阅读量156

点赞数 2

文章标签： css flex css3

本文链接：https://blog.csdn.net/weixin_48696905/article/details/116570641

版权

布局模式：

块（Block），用于网页中的部分

行内（Inline），用于文本

表，用于二维表数据

定位（position)，用于元素的明确位置

弹性布局 (flex)，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位

flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局

给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式

容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流

display:flex; 容器添加弹性布局后，显示为块级元素

display:inline-flex; 容器添加弹性布局后，显示为行内元素

设为 Flex布局后，子元素的float、clear和vertical-align属性将失效但是position属性，依然生效

弹性布局中的两个方向：

主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴

交叉轴：与主轴垂直的另一方向，称为交叉轴

父元素（容器）

通过将 display 属性设置为 flex，flex 容器将可伸缩

弹性布局中必须有一个 display 属性设置为 flex 的父元素

弹性容器的直接子元素会自动成为弹性项目

可以在父元素（容器）中设置flex 容器属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction 属性

定义容器要在哪个方向上堆叠 flex 项目（决定主轴的方向）

flex-direction: column;垂直堆叠 flex 项目从上到下（主轴为垂直方向，起点在上沿）

flex-direction: column-reverse;垂直堆叠 flex 项目但从下到上（主轴为垂直方向，起点在下沿）

flex-direction: row;水平堆叠 flex 项目从左到右默认（主轴为水平方向，起点在左端）

flex-direction: row-reverse;水平堆叠 flex 项目但从右到左（主轴在水平方向，起点在右端）

flex-wrap 属性

规定是否应该对 flex 项目换行（定义如果一条轴线排不下，如何换行）

flex-wrap: wrap;规定 flex 项目将在必要时进行换行（换行，并且第一行在容器最上方）

flex-wrap: nowrap;规定将不对 flex 项目换行默认（当容器宽度不够时，每个项目会被挤压宽度）

flex-wrap: wrap-reverse;规定如有必要，弹性项目将以相反的顺序换行（换行，并且第一行在容器最下方）

flex-flow 属性

用于同时设置 flex-direction 和 flex-wrap 属性的简写属性

flex-flow: row wrap;水平堆叠 flex 项目（从左到右) 并规定 flex 项目将在必要时进行换行

justify-content 属性

用于对齐 flex 项目（定义了项目在主轴上的对齐方式）

justify-content: center;将 flex 项目在容器的中心对齐（居中）

justify-content: flex-start;将 flex 项目在容器的开头对齐默认（项目位于主轴起点）

justify-content: flex-end;将 flex 项目在容器的末端对齐（项目位于主轴终点）

justify-content: space-around;显示行之前、之间和之后带有空格的 flex 项目（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。开头和最后的项目，与父容器边缘有一定的间隔)

justify-content: space-between;显示行之间有空格的 flex 项目（两端对齐，项目之间的间隔都相等。开头和最后的项目，与父容器边缘没有间隔)

align-items 属性

用于垂直对齐 flex 项目（定义项目在交叉轴上如何对齐）

align-items: center;将 flex 项目在容器中间对齐（交叉轴的中点对齐）

align-items: flex-start;将 flex 项目在容器顶部对齐（交叉轴的起点对齐）

align-items: flex-end;将弹性项目在容器底部对齐（交叉轴的终点对齐）

align-items: stretch;拉伸 flex 项目以填充容器默认（如果项目未设置高度或设为auto，将占满整个容器的高度）

align-items: baseline;使 flex 项目基线对齐（项目的第一行文字的基线对齐。文字的行高、字体大小会影响每行的基线)

align-content 属性

用于对齐弹性线（定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）

当项目换为多行时，可使用align-content取代align-items

align-content: space-between;显示的弹性线之间有相等的间距（与交叉轴两端对齐，轴线之间的间隔平均分布）

align-content: space-around;显示弹性线在其之前、之间和之后带有空格（每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍）

align-content: stretch;拉伸弹性线以占据剩余空间默认（轴线占满整个交叉轴）

align-content: center;在容器中间显示弹性线（与交叉轴的中点对齐）

align-content: flex-start;在容器开头显示弹性线（与交叉轴的起点对齐）

align-content: flex-end;在容器的末尾显示弹性线（与交叉轴的终点对齐）

完美的居中

将 justify-content 和 align-items 属性设置为center，然后 flex 项目会在两个轴的方向同时居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>完美的居中</title>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: black;
}

.flex-container div {
  background-color: red;
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div></div>
</div>

</body>
</html>

子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目

用于弹性项目的属性有：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order 属性

可以改变 flex 项目的顺序（定义项目的排列顺序。数值越小，排列越靠前，默认为0）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: black;
}

.flex-container div {
  background-color: red;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

</body>
</html>

flex-grow 属性

规定某个 flex 项目相对于其余 flex 项目将增长多少（定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: black;
}

.flex-container div {
  background-color: red;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 2">2</div>
  <div style="flex-grow: 4">3</div>
</div>

</body>
</html>

flex-shrink 属性

规定某个 flex 项目相对于其余 flex 项目将收缩多少（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）

flex-basis 属性

规定 flex 项目的初始长度

定义项目占据的主轴空间。如果主轴为水平，则设置这个属性，相当于设置项目的宽度。原width将会失效。

flex 属性

是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

使第二个弹性项目不可增长（0），不可收缩（0），且初始长度为 10 像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: black;
}

.flex-container div {
  background-color: red;
  color: white;
  width: 300px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div style="flex: 0 0 10px">2</div>
  <div>3</div>
  <div>4</div>
</div>

</body>
</html>

align-self 属性

规定弹性容器内所选项目的对齐方式（定义单个项目自身在交叉轴上的排列方式）

将覆盖容器的 align-items 属性所设置的默认对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color:black;
}

.flex-container div {
  background-color:red;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
</div>

</body>
</html>

Night-Monkey

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flexbox 弹性布局

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：块（Block），用于网页中的部分（节）行内（Inline），用于文本表，用于二维表数据定位，用于元素的明确位置通过将display属性设置为flex，flex 容器将可伸缩弹性布局中必须有一个display属性设置为flex的父元素。弹性容器的直接子元素会自动成为弹性项目。flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目flex-directio...
复制链接

扫一扫