HTML5 flex 1 1 auto 科普文章
引言
在Web开发中，我们经常需要对页面进行布局。HTML5提供了一种强大的布局方式，即使用flex布局。flex布局可以帮助我们快速而灵活地创建响应式的网页布局。
本文将为您介绍HTML5中的flex布局，并详细解释flex 1 1 auto这个常用的flex属性值。我们将通过代码示例和类图来展示这个布局方式的应用，并帮助您理解它的工作原理和使用方法。
什么是flex布局？
Flex布局是一种CSS3中的弹性盒模型，它可以帮助我们更轻松地实现自适应的页面布局。与传统的基于盒子模型的布局相比，flex布局更加灵活，可以自动调整子元素的大小和位置。
flex布局的基本概念
在flex布局中，有三个重要的概念：容器（container）、项目（item）和主轴（main axis）。
容器是指应用flex布局的元素，通过设置display: flex来启用flex布局。
项目是指容器中的每个子元素，称为flex项目。每个项目都有自己的大小和位置属性，可以通过设置不同的flex属性值来调整。
主轴是指容器的主要方向。在flex布局中，主轴可以是水平方向（默认值）或垂直方向。项目会沿着主轴排列，根据设置的flex属性值进行调整。
flex属性值的介绍
flex属性是用来设置flex项目的大小和位置的主要属性。它是一个缩写属性，包含三个子属性：flex-grow、flex-shrink和flex-basis。
flex-grow
flex-grow决定了项目在剩余空间中的分配比例。默认值为0，表示项目不会扩展。如果所有项目的flex-grow都为1，则它们将等分剩余空间。
以下是一个代码示例：
<div class="container">
<div class="item" style="flex-grow: 1;">Item 1</div>
<div class="item" style="flex-grow: 1;">Item 2</div>
<div class="item" style="flex-grow: 1;">Item 3</div>
</div>
flex-shrink
flex-shrink决定了项目的收缩比例。默认值为1，表示项目会按比例收缩。如果所有项目的flex-shrink都为0，即使容器空间不足，项目也不会收缩。
以下是一个代码示例：
<div class="container">
<div class="item" style="flex-shrink: 0;">Item 1</div>
<div class="item" style="flex-shrink: 0;">Item 2</div>
<div class="item" style="flex-shrink: 0;">Item 3</div>
</div>
flex-basis
flex-basis决定了项目在主轴上的初始大小。它可以是一个具体的长度值，也可以是auto。
以下是一个代码示例：
<div class="container">
<div class="item" style="flex-basis: 200px;">Item 1</div>
<div class="item" style="flex-basis: 300px;">Item 2</div>
<div class="item" style="flex-basis: auto;">Item 3</div>
</div>
flex 1 1 auto 的含义
flex 1 1 auto是一种常用的flex属性值组合。它可以帮助我们实现一个自适应的页面布局。
flex-grow: 1表示项目可以扩展，占据剩余空间的比例为1。flex-shrink: 1表示项目可以收缩。flex-basis: auto表示项目的初始大小由内容决定。
这个组合的意思是，项目可以根据剩余空间扩展或收缩，并根据内容的大小来确定初始大小。
flex 1 1 auto 的使用示例
为了更好地
