掌握这种布局方式，轻松打造新时代网页设计：

Flex布局入门指南

随着互联网的不断发展，网页设计越来越被人们所关注，如何将网页设计得更加美观、简洁且易于操作成为了网页设计师的重要任务。为了实现这个目标，不断有新的设计技巧和布局方式出现。其中，Flex布局作为一种较为新颖的、弹性的布局方式，能够帮助网页设计师非常轻松地实现想要的布局效果。

一、Flex布局简介

Flex布局也叫Flexbox，它是CSS3的新特性之一，用来改变盒子模型的布局方式，使得布局更为灵活、简单快捷，可以方便的实现各种布局效果，特别适合于实现响应式布局。

与传统的盒子模型不同，Flex布局的主要思想是在一个容器里创建了一个弹性的盒子，这个盒子里面包含了若干个弹性子项，可以通过控制子项的弹性来实现灵活布局。

二、Flex布局的属性

在Flex布局中，有三个重要的属性，分别是flex容器、flex子项和它们之间的关系。下面分别进行介绍。

1. flex容器

Flex容器就是包裹Flex子项的容器，实现了Flex布局的所有属性都可以放在容器上，这里列举几个常用的属性。

（1）display:flex；

定义一个Flex容器。

（2）flex-direction；

定义了行或列的方向，它具有四个属性值：row、row-reverse、column、column-reverse。其中row表示主轴为水平方向、起点在左端，末尾在右端；row-reverse表示主轴为水平方向、起点在右端，末尾在左端；column表示主轴为垂直方向，起点在上沿下移，末尾在下沿上移；column-reverse表示主轴为垂直方向，起点在下沿上移，末尾在上沿下移。

（3）justify-content；

定义子项在主轴上的对齐方式，有五个属性值：flex-start、flex-end、center、space-between、space-around。其中flex-start表示子项在主轴上的起点对齐；flex-end表示子项在主轴上的末端对齐；center表示子项在主轴上居中对齐；space-between表示子项在主轴上平均分布且首尾靠边；space-around表示子项在主轴上平均分布且左右间距相等。

（4）align-items；

定义子项在交叉轴上的对齐方式，有五个属性值：flex-start、flex-end、center、baseline、stretch。其中flex-start表示子项在交叉轴上的起点对齐；flex-end表示子项在交叉轴上的末端对齐；center表示子项在交叉轴上居中对齐；baseline表示子项的基线（文字的基准线）对齐；stretch表示子项在交叉轴上被拉伸至与容器同高。

2. flex子项

Flex子项就是Flex容器中的项，可以通过设置子项个数及其大小控制Flex容器中的布局。

（1）flex-glowth；

定义子项的放缩比例，默认值为0，表示不放缩。

（2）flex-shrink；

定义子项在容器内部缩小时的比例，默认值为1，表示放缩。

（3）flex-basis；

定义子项在容器内部的基本大小。

（4）order；

定义存放子项的顺序。

三、Flex布局的应用

在Web设计中，Flex布局的应用非常广泛，它可以用于实现导航菜单的布局、主页的布局、图片展示的布局等等。下面对一些常见的应用进行介绍。

1. Flex布局实现导航菜单布局

导航菜单是每个网站必不可少的一个部分，它是网站内部链接的入口，以一种良好的方式组织和展示菜单对于提高用户体验至关重要。下面展示如何使用Flex布局来实现导航菜单的布局。

html

```

```

CSS

```

.menu {

display:flex;

justify-content: space-between;

align-items: center;

padding:20px;

background-color:#000;

}

ul {

display:flex;

list-style:none;

margin:0;

padding:0;

}

li{

margin:0 20px;

}

a{

color:#fff;

text-decoration:none;

display:inline-block;

}

```

解释：通过使用Flex布局，我们可以让菜单栏item自适应整个导航菜单的宽度，并且将它们紧密排列。通过设置justify-content的属性让容器里的所有项在主轴上平均分配。同时，我们用align-items来制定子项的排列方式，以更好的适应不同屏幕的大小。

2. Flex布局实现图片展示

在网页设计中，经常需要展示图片，比如展示公司的产品图片或者介绍某个风景名胜的图片。下面展示如何使用Flex布局的使用实现图片的展示和排版。

HTML

```