让布局设计更灵活的Flex布局笔记

前端

2023-11-29 02:29:02

Flex布局

Flex布局是一种非常方便的布局方式，可以让我们轻松实现各种复杂的布局。Flex布局的原理很简单，它将容器中的元素排列成一条或多条轴线，然后根据轴线的排列方向和元素的尺寸来确定元素的位置。

容器的属性

Flex布局的容器可以设置以下6个属性：

flex-direction：决定主轴的方向（项目的排列方向）
flex-wrap：决定是否换行
flex-flow：决定主轴的方向和是否换行
justify-content：决定主轴上元素的排列方式
align-items：决定侧轴上元素的排列方式
align-content：决定多行元素的排列方式

`flex-direction` 属性

flex-direction 属性决定主轴的方向，即项目排列的方向。flex-direction 属性有以下几个值：

row：主轴为水平方向，项目排列成一行
row-reverse：主轴为水平方向，项目排列成一行，但从右到左排列
column：主轴为垂直方向，项目排列成一列
column-reverse：主轴为垂直方向，项目排列成一列，但从下到上排列

`flex-wrap` 属性

flex-wrap 属性决定是否换行。flex-wrap 属性有以下几个值：

nowrap：不换行，所有项目都在同一行排列
wrap：换行，如果一行装不下所有项目，则换行显示
wrap-reverse：换行，如果一行装不下所有项目，则从右到左换行显示

`flex-flow` 属性

flex-flow 属性决定主轴的方向和是否换行。flex-flow 属性可以同时设置 flex-direction 属性和 flex-wrap 属性。例如：

.container {
  flex-flow: row wrap;
}

表示主轴为水平方向，项目排列成一行，如果一行装不下所有项目，则换行显示。

`justify-content` 属性

justify-content 属性决定主轴上元素的排列方式。justify-content 属性有以下几个值：

flex-start：元素排列在主轴的起点
flex-end：元素排列在主轴的终点
center：元素排列在主轴的中心
space-around：元素均匀分布在主轴上，两端留有相同的空间
space-between：元素均匀分布在主轴上，两端不留空间

`align-items` 属性

align-items 属性决定侧轴上元素的排列方式。align-items 属性有以下几个值：

flex-start：元素排列在侧轴的起点
flex-end：元素排列在侧轴的终点
center：元素排列在侧轴的中心
baseline：元素排列在侧轴的基线上
stretch：元素拉伸以填满整个侧轴

`align-content` 属性

align-content 属性决定多行元素的排列方式。align-content 属性有以下几个值：

flex-start：元素排列在侧轴的起点
flex-end：元素排列在侧轴的终点
center：元素排列在侧轴的中心
space-around：元素均匀分布在侧轴上，两端留有相同的空间
space-between：元素均匀分布在侧轴上，两端不留空间

实例

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
  <div class="item">项目 5</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}