二十六、使用 Flex 布局模型实现网页布局之 flex 布局（2）

什么是 Flex 布局

使用 flex 布局模型可以快速、灵活的开发网页

在此之前，我们学过，多个盒子横向排列可以使用浮动属性来实现，设置盒子间的间距用 margin 属性完成，但在这里需要注意浮动的盒子会脱标的问题。

而 Flex 布局可以 避免浮动脱标 的问题，Flex 布局通常也称为 弹性布局 ，是一种浏览器推荐的布局模型，它能使布局网页更简单、灵活。

Flex 布局适合 结构化 布局，基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

Flex 布局模型

Flex 布局时，给 父元素 添加 display:flex; 子元素可以自动的挤压或拉伸

组成部分：

弹性容器
弹性盒子
主轴
侧轴 / 交叉轴

下面是一张很形象的图，可做参考：

Flex 布局默认主轴在水平方向，弹性盒子都是沿着主轴排列的，如下图：视觉效果是所有子级在一行排列

HTML 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>

主轴对齐方式

网页中，盒子之间是有距离的，在 Flex 布局模型中，通过调节主轴或侧轴的 对齐方式 来设置盒子之间的距离。

使用 justify-content 调节元素在主轴的对齐方式，即修改主轴对齐方式属性：

flex-start ：从起点开始依次排列，默认值
flex-end ：从终点开始依次排列
center ：沿着主轴居中排列
space-around ：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between ：弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly ：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

（1）flex-start / 默认值示例

HTML 复制代码

    <style>
      .box {
        display: flex;
        justify-content: flex-start; /* 从起点开始依次排列，默认值 */
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>

（2）flex-end 示例

HTML 复制代码

    <style>
      .box {
        display: flex;
        justify-content: flex-end; /* 从终点开始依次排列 */
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

（3）center 示例

HTML 复制代码

    <style>
      .box {
        display: flex;
        justify-content: center; /* 沿着主轴居中排列*/
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

（4）space-around 示例

HTML 复制代码

    <style>
      .box {
        display: flex;
        /* 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 */
        /* 从视觉上看，自己之间的距离是父级两侧距离的 2 倍*/
        justify-content: space-around; 
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

（5）space-between 示例

HTML 复制代码

    <style>
      .box {
        display: flex;
        /* 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 */
        justify-content: space-between;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

（6）space-evenly 示例

HTML 复制代码

    <style>
      .box {
        display: flex;
        /* 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 */
        justify-content: space-evenly;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

侧轴对齐方式

使用 align-items （添加到弹性容器）调节元素在侧轴的对齐方式，即修改侧轴对齐方式属性：

align-self ：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
flex-start ：从起点开始依次排列，默认值
flex-end ：从终点开始依次排列
center ：沿着侧轴居中排列
stretch ：弹性盒子沿着主轴线被拉伸至铺满容器，默认值

（1）`align-items` 添加到弹性容器，控制整个弹性容器示例

align-items: flex-start; 从起点开始依次排列，默认值

HTML 复制代码

    <style>
      .box {
        display: flex;
        从起点开始依次排列，默认值
        align-items: flex-start;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>

align-items: flex-end; 从终点开始依次排列

html 复制代码

    <style>
      .box {
        display: flex;
        /* 从终点开始依次排列 */
        align-items: flex-end;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

align-items: center; 沿着侧轴居中排列

HTML 复制代码

    <style>
      .box {
        display: flex;
        /*沿着侧轴居中排列*/
        align-items: center;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

align-items: stretch; 弹性盒子沿着主轴线被拉伸至铺满容器，默认值

HTML 复制代码

    <style>
      .box {
        display: flex;
        /*弹性盒子沿着主轴线被拉伸至铺满容器，默认值*/
        align-items: stretch;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>

测试的时候，去掉子级的高度

HTML 复制代码

    <style>
      .box {
        display: flex;
        justify-content: space-evenly;
        align-items: stretch;
        height: 200px;
        border: 1px solid #000;
      }
      .box div{
        width: 100px;
        /* height: 100px; */
        background-color: lightgreen;
      }
    </style>
  </head>

(2)`align-self` 单独控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）示例

默认值与上述默认值效果相同，以下示例两个：flex-end 和 center

align-self: flex-end;

HTML 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
      .box div:nth-child(2){
        align-self: flex-end;
      }
    </style>

align-self: center;

HTML 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
      .box div:nth-child(1){
        align-self: center;
      }
    </style>

弹性盒子的尺寸特点 - 宽高由内容撑开

子级无高度 --- 高度由内容撑开

HTML 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div {
        width: 100px;
        /* height: 100px; */
        background-color: lightgreen;
      }
      .box div:nth-child(2){
        align-self: center;
      }
    </style>

子级宽高都不设置 --- 宽高都由内容撑开

HTML 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div {
        /* width: 100px; */
        /* height: 100px; */
        background-color: lightgreen;
      }
      .box div:nth-child(2){
        align-self: center;
      }
    </style>

伸缩比

使用 flex 属性修改弹性盒子的 伸缩比 ，取值是整数数值，只占用父盒子的 剩余尺寸

HTML 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div {
        margin: 0 50px;
        height: 100px;
        background-color: lightgreen;
      }
      .box div:nth-child(3){
        width: 80px;
      }
    </style>

占用父级剩余尺寸的 1 份

html 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div {
        margin: 0 50px;
        height: 100px;
        background-color: lightgreen;
      }
      .box div:nth-child(3) {
        width: 80px;
      }
      .box div:nth-child(2) {
        flex: 1;
      }
    </style>

其他份数

HTML 复制代码

    <style>
      .box {
        display: flex;
        height: 200px;
        border: 1px solid #000;
      }
      .box div {
        margin: 0 50px;
        height: 100px;
        background-color: lightgreen;
      }
      .box div:first-child {
        width: 80px;
      }
      .box div:nth-child(2) {
        flex: 4;
      }
      .box div:last-child {
        flex: 1;
      }
    </style>

上述设置的含义：

第一个子盒子 80 像素固定不变；

将剩下的父元素宽度等分为 5 份，第二个子盒子占用 4 份；第三个子盒子占用 1 份，后面的两个弹性盒子会随着父级宽度的变化而变化。

二十六、使用 Flex 布局模型实现网页布局之 flex 布局（2）

什么是 Flex 布局

Flex 布局模型

主轴对齐方式

（1）flex-start / 默认值示例

（2）flex-end 示例

（3）center 示例

（4）space-around 示例

（5）space-between 示例

（6）space-evenly 示例

侧轴对齐方式

（1）align-items 添加到弹性容器，控制整个弹性容器 示例

(2)align-self 单独控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）示例

弹性盒子的尺寸特点 - 宽高由内容撑开

伸缩比

（1）`align-items` 添加到弹性容器，控制整个弹性容器示例

(2)`align-self` 单独控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）示例