点点记事-Flex菜鸟教程，轻松入门，掌握现代网页布局神器

本文目录导读：

随着前端技术的不断发展，响应式网页设计已经成为Web开发的重要趋势，Flex布局作为一种强大的布局方式，因其简单易用、灵活多变的特点，受到了广大开发者的青睐，本文将为大家带来一份Flex菜鸟教程，帮助初学者快速入门Flex布局，掌握这一现代网页布局神器。

Flex布局概述

Flex布局，即弹性布局，是CSS3中的一种布局方式，它能够方便地实现多行多列布局、响应式布局等，Flex布局具有以下特点：

1、容器（flex container）：使用flex布局的元素成为容器，其子元素称为项目（flex item）。

2、主轴（main axis）和交叉轴（cross axis）：容器中的子元素会沿着主轴和交叉轴排列。

3、布局属性：通过设置flex属性，可以控制容器和项目的大小、顺序、对齐方式等。

1、display：将元素设置为flex布局容器，默认值为flex。

2、flex-direction：设置主轴方向，有row（默认）、row-reverse、column、column-reverse四种值。

3、flex-wrap：设置子元素是否换行，有nowrap（默认）、wrap、wrap-reverse三种值。

4、justify-content：设置主轴方向上的对齐方式，有flex-start、flex-end、center、space-between、space-around五种值。

5、align-items：设置交叉轴方向上的对齐方式，有flex-start、flex-end、center、stretch、baseline五种值。

6、align-content：设置多行子元素在交叉轴方向上的对齐方式，有flex-start、flex-end、center、space-between、space-around、stretch六种值。

1、order：设置项目的排序，数值越小，排序越靠前。

2、flex-grow：设置项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3、flex-shrink：设置项目的缩小比例，默认为1，即如果空间不足，项目将缩小。

4、flex-basis：设置项目的初始大小，默认值为auto，即项目的本来大小。

1、实现水平居中布局

.container {
  display: flex;
  justify-content: center;
}

2、实现垂直居中布局

.container {
  display: flex;
  align-items: center;
}

3、实现两列布局

.container {
  display: flex;
  flex-direction: row;
}
.left {
  flex: 1;
}
.right {
  flex: 2;
}

4、实现三列布局

.container {
  display: flex;
  flex-direction: row;
}
.item1 {
  flex: 1;
}
.item2 {
  flex: 2;
}
.item3 {
  flex: 3;
}

Flex布局作为一种强大的布局方式，已经成为现代网页设计的必备技能，通过本文的Flex菜鸟教程，相信大家已经对Flex布局有了初步的了解，在实际开发中，多加练习，熟练掌握Flex布局，将为你的网页设计带来更多可能性。