flex布局

最新推荐文章于 2024-09-19 11:54:01 发布

vonallen

最新推荐文章于 2024-09-19 11:54:01 发布

阅读量193

点赞数

分类专栏：前端文章标签： flex javascript css

本文链接：https://blog.csdn.net/ValexQ/article/details/107744110

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

flex布局简介

flex布局的结构主要包括容器containers（父元素）以及项目items（子元素）

以下示例创建一个基本的CSS flexbox：

// 示例
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-item {
  width: 100px;
  margin: 10px;
}

下一个示例创建一个响应式图片库：

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.flex-item {
  background-color: lightgray;
  background-position: center center;
  background-size: cover;
  margin: 2px;
  flex: auto;
  height: 240px;
  flex-basis: 150px;
}

记住：CSS 中的 flexbox 是一维的，因此，它不会同时在垂直和水平维度上布置项目。

将属性分配给 父元素 比将它们单独分配给每个子元素效率更高。这些属性允许在容器内组织项目(一些应用于父元素;其他的适用于子元素)

CSS flexbox可以控制布局的以下方面：

项目显示的方向
调整窗口大小时对项目的包装
项目和之间的空间的合理性
项目的垂直对齐
项目的水平对齐
一行中的项目顺序
当窗口调整大小时，项目增加或缩小的能力
单个项的对齐

Flex containers

CSS flex 容器是具有显示属性设置为 flex 或 inline-flex 的元素。然后，容器的所有子项都将变为弹性项。

因此， CSS flex 容器定义了其子元素的大小、对齐方式和位置。

提示：inline-flex容器和block flex容器的子元素行为相同。 flex容器要么扩展项目以填充可用空间，要么使它们变小以避免溢出。

每一个 flex box 都含有下列默认属性值：

flex-direction: row
justify-content: flex-start
align-items: stretch
align-content: stretch
flex-basis: auto
flex-wrap: nowrap

容器内项目连续分布，内容的大小决定主轴上的大小。当项目超出容器的容纳范围时，它们就会溢出。另外，如果某些项目的高度比其他项目大，则较小的项目会拉伸以适合最高的项目。

Note: 其他属性没有默认值，如果不设定，CSS不会自主设定

Flexbox axis

以下CSS flex示例显示了flex-direction如何更改flex容器及其项目：

CSS flexbox有两个轴向: main和cross.

可以通过使用 flex-direction 属性去定义主轴方向，4个值分别是：row, row-reverse, column, column-reverse.

属性值	描述
row	从左到右水平排列子元素（默认值）
column	从上到下垂直排列子元素
row-reverse	从右向左排列子元素
column-reverse	从下到上垂直排列子元素

Flex-direction

flex-direction: column 项目的方向是从上到下。

.flex-container { display: flex; flex-direction: column; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: column-reverse 项目的方向从下到上。

.flex-container { display: flex; flex-direction: column-reverse; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: row 项目方向从左到右。

.flex-container { display: flex; flex-direction: row; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: row-reverse项目方向从右向左

.flex-container { display: flex; flex-direction: row-reverse; } 
.flex-item { width: 100px; margin: 10px; }

Flex-wrap

CSS flex-wrap属性定义了容器包含多项目时的行为

可能的 flex-wrap 值是:

nowrap
wrap
wrap-reverse

选项	说明
nowrap	元素不拆行或不拆列（默认值）
wrap	容器元素在必要的时候拆行或拆列。
wrap-reverse	容器元素在必要的时候拆行或拆列，但是以相反的顺序

Note: flex-wrap属性确定是否应包装溢出。如果未设置此属性，则元素默认情况下会溢出容器。

下面的CSS flex示例演示了每个flex-wrap值的作用。

flex-wrap: wrap:

.flex-container { display: flex; flex-wrap: wrap; } 
.flex-item { width: 100px; margin: 10px; }

flex-wrap: nowrap:

.flex-container { display: flex; flex-wrap: nowrap; } 
.flex-item { width: 100px; margin: 10px; }

flex-wrap: wrap-reverse

.flex-container { display: flex; flex-wrap: wrap-reverse; } 
.flex-item { width: 100px; margin: 10px; }

Flex-flow

flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。
使用此简写，您可以为 flex 容器定义主轴和交叉轴。

Justify-content

用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。

选项	说明
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始
space-between	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	元素间距离平均分配

Align-items

用于控制容器元素在交叉轴上的排列方式。

选项	说明
stretch	元素被拉伸以适应容器（默认值）
center	元素位于容器的中心
flex-start	元素位于容器的交叉轴开头
flex-end	元素位于容器的交叉轴结尾

Justify-content 和 align-items

CSS因未能提供简单的居中元素方法而臭名昭著。但是， CSS flexbox 可以将一个或多个项目放在容器的中心。您可以通过将 justify-content 和 align-items 都设置为居中来使元素居中。

.flex-container { display: flex; align-items: center; justify-content: center; } 
.flex-item { width: 100px; margin: 10px;}

Align-content

只适用于多行显示的弹性容器，它的作用是当flex容器在交叉轴上有多余的空间时，对元素的对齐处理。

选项	说明
stretch	将空间平均分配给元素
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始
space-between	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	元素间距离平均分配

Note: 如果容器中只有一行项，则此属性将不起作用。

Flex items

CSS flex项是flex容器的直接子元素。一旦您将一个元素设置为容器，它的子元素就会自动成为flex项目。

不能使用float与clear规则
弹性元素均为块元素
绝对定位的弹性元素不参与弹性布局

有五个针对单个弹性项目的属性（一个简写）。它们为您提供了对单独元素的更多控制，而不会覆盖整个flex容器布局的规则。
默认情况下，有三个属性具有初始值:

flex-grow: 0
flex-shrink: 1
flex-basis: auto

使用这些值，flex项不会展开以填充主轴上的可用空间。但是，当容器比需要的更小时，伸缩项会收缩。

设置flex- base值auto意味着项目足够大，以适合其内容。如果flex项目填满了flex容器，但是其中一个项目的内容明显多于其他项目，那么它将获得更多的空间来容纳所有内容。这个默认设置确保了最好的布局。

Align-self

用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。

选项	说明
stretch	将空间平均分配给元素
flex-start	元素紧靠主轴起点
flex-end	元素紧靠主轴终点
center	元素从弹性容器中心开始

order

默认情况下，容器中的弹性项目以它们在代码中出现的顺序（源顺序）出现。您可以使用order属性更改此序列。

您必须指定一个负数或正数作为其值。根据这些数字，这些物品将被重新加载。最低的数字排在最前面（负值先于0和正数）

以下示例显示了实际使用的CSS flex项目order属性。

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