【前端web入门第六天】02 flex布局

小徐要考研

已于 2024-02-15 10:47:43 修改

阅读量872

点赞数 24

分类专栏：前端web开发文章标签：前端 html5 css

于 2024-02-15 10:47:33 首次发布

本文链接：https://blog.csdn.net/weixin_62613321/article/details/136091913

版权

前端web开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章目录

Flex布局

Flex布局

1.Flex组成

设置方式:给父元素设置display: flex，子元素可以自动挤压或拉伸
组成部分:

弹性容器
弹性盒子
主轴:默认在水平方向
侧轴/交叉轴:默认在垂直方向

在这里插入图片描述
分析:

自动设置,由代码实现.

2.主轴与侧轴对齐方式

2.1 主轴对齐方式(横轴)

属性名: justify-content

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

分析:

前两个不常用,后四个是重点.

2.2 侧轴对齐方式 (纵轴)

属性名

align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置).
align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置)

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

分析:

前两个重点,后两个基本不用.

2.3 修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向
属性名:flex-direction
属性值

属性值	效果
row	水平方向,从左到右(默认)
column	垂直方向,从上到下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

分析:

只记colum.
修改主轴方向垂直方向;侧轴自动变换到水平方向

3.弹性伸缩比

作用︰控制弹性盒子的主轴方向的尺寸。
属性名: flex
属性值:整数数字，表示占用父级剩余尺寸的份数。
分析:

默认情况下，主轴方向尺寸是靠内容撑开:侧轴默认拉伸

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-弹性伸缩比</title>
  <style>
    /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
    .box {
      display: flex;
      flex-direction: column;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      /* height: 100px; */
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 200px;
    }

    .box div:nth-child(2) {
      flex: 1;
    }

    .box div:nth-child(3) {
      flex: 2;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

在这里插入图片描述

4.弹性换行与行对齐方式

4.1 弹性换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名: flex-wrap

属性值

wrap:换行
nowrap:不换行（默认)

4.2 行对齐方式

属性名: align-content
属性值

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