快速学习flex布局

最新推荐文章于 2024-04-05 14:47:46 发布

Ace_Arm

最新推荐文章于 2024-04-05 14:47:46 发布

阅读量379

点赞数

本文链接：https://blog.csdn.net/Ace_Arm/article/details/81045045

版权

flex布局可以实现空间自动分配，自动对齐，适用于简单的线性布局。
flex的父容器叫做flex-container，子元素叫做flex-item
以下展示的html结构均为：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="content">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
</body>
</html>

flex-container的6个属性

1. flex-direction

指的是规定子元素展示的方向，有3个值
flex-direction: row;
按行展示（默认）

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
}
.child {
  border: 5px solid red;
  height: 100px;
  width: 100px;
}

flex-direction: row-reverse;
按行反向展示（默认）

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row-reverse;
}
.child {
  border: 5px solid red;
  height: 100px;
  width: 100px;
}

这里写图片描述
flex-direction: column;
按行展示（默认）

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
}
.child {
  border: 5px solid red;
  height: 100px;
  width: 100px;
}

这里写图片描述

2. flex-wrap

flex-wrap: wrap;
换行
父容器宽度为300，而子元素宽高为110。

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
  flex-wrap: wrap;
}
.child {
  border: 5px solid red;
  height: 110px;
  width: 110px;
}

这里写图片描述
flex-wrap: nowrap;
不换行，但是会压缩子元素的宽度，以便能够放下所有的子元素。

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
  flex-wrap: wrap;
}
.child {
  border: 5px solid red;
  height: 110px;
  width: 110px;
}

这里写图片描述

3. flex-flow

一般来说flex-direction和flex-wrap需要配合在一起使用，因此将两者合并，缩写为flex-flow，如下所示：

flex-flow: row nowrap;

4. justify-content

主轴方向的对齐
justify-content: space-between;

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
  justify-content: space-between;

}
.child {
  border: 5px solid red;
  height: 50px;
  width: 50px;
}

这里写图片描述

justify-content: space-around;

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
  justify-content: space-around;

}
.child {
  border: 5px solid red;
  height: 50px;
  width: 50px;
}

这里写图片描述
justify-content: flex-start;

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
  justify-content: flex-start;

}
.child {
  border: 5px solid red;
  height: 50px;
  width: 50px;
}

这里写图片描述
justify-content: flex-end;

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
  justify-content:  flex-end;

}
.child {
  border: 5px solid red;
  height: 50px;
  width: 50px;
}

这里写图片描述
justify-content: center;

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row;
  justify-content:  center;

}
.child {
  border: 5px solid red;
  height: 50px;
  width: 50px;
}

这里写图片描述

5. align-items

当子元素的高度都不一样时，可以重写父容器的高度来配合子元素的高度，当然，父容器的高度就不能写死，只能靠子元素的高度撑开。
侧轴方向的对齐
align-items: stretch;

.content {
  margin: 100px;
  display: flex;
  border: 5px solid black;
  width: 330px;
  flex-direction: row;
  align-items: stretch;
}
.child {
  border: 5px solid red;
  width: 100px;
}
.child:nth-child(1) {
  height: 100px;
}
.child:nth-child(2) {
  height: 120px;
}
.child:nth-child(3) {
  height: 200px;
}

这里写图片描述
align-items: center;

.content {
  margin: 100px;
  display: flex;
  border: 5px solid black;
  width: 330px;
  flex-direction: row;
  align-items: center;
}
.child {
  border: 5px solid red;
  width: 100px;
}
.child:nth-child(1) {
  height: 100px;
}
.child:nth-child(2) {
  height: 120px;
}
.child:nth-child(3) {
  height: 200px;
}

这里写图片描述
align-items: flex-start;

.content {
  margin: 100px;
  display: flex;
  border: 5px solid black;
  width: 330px;
  flex-direction: row;
  align-items: flex-start;
}
.child {
  border: 5px solid red;
  width: 100px;
}
.child:nth-child(1) {
  height: 100px;
}
.child:nth-child(2) {
  height: 120px;
}
.child:nth-child(3) {
  height: 200px;
}

这里写图片描述
align-items: flex-end

.content {
  margin: 100px;
  display: flex;
  border: 5px solid black;
  width: 330px;
  flex-direction: row;
  align-items: flex-end;
}
.child {
  border: 5px solid red;
  width: 100px;
}
.child:nth-child(1) {
  height: 100px;
}
.child:nth-child(2) {
  height: 120px;
}
.child:nth-child(3) {
  height: 200px;
}

这里写图片描述

6. align-contents

一般在出现多行多列的情况下时使用。
align-contents链接

flex-item的6个属性

1. flex-grow

指的是规定子元素展示的方向，有3个值
flex-grow: 1/2/3……;
空间过多时，增长子元素，是把多余的空间按照比例分配给子元素

.content {
  margin: 100px;
  display: flex;
  border: 5px solid black;
  width: 400px;
  flex-direction: row;
}
.child {
  border: 5px solid red;
  width: 80px;
}
.child:nth-child(1) {
  height: 100px;
  flex-grow: 1;
}
.child:nth-child(2) {
  height: 120px;
}
.child:nth-child(3) {
  height: 200px;
}

这里写图片描述

2. flex-shrink

flex-shrink: 1/2/3……;
按空间不够时，按照比例进行收缩

.content {
  display: flex;
  border: 5px solid black;
  height: 330px;
  width: 330px;
  flex-direction: row-reverse;
}
.child {
  border: 5px solid red;
  height: 100px;
  width: 100px;
}

这里写图片描述

3. order

order: 1/2/3……;
改变子元素的位置

.content {
  margin: 100px;
  display: flex;
  border: 5px solid black;
  width: 300px;
  flex-direction: row;
}
.child {
  border: 5px solid red;
  width: 200px;
}
.child:nth-child(1) {
  height: 100px;
  flex-shrink: 3;
  order: 3;
}
.child:nth-child(2) {
  height: 120px;
  order: 1;
}
.child:nth-child(3) {
  height: 200px;
  order: 2;
}