6HTMLFlex布局

最新推荐文章于 2025-10-27 15:00:00 发布
原创 最新推荐文章于 2025-10-27 15:00:00 发布 · 734 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css #html #.net

01-标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

1680334840709

02-浮动

基本使用

作用：让块元素水平排列。

属性名：float

属性值

  • left：左对齐
  • right：右对齐
<!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>浮动</title>
  <style>
    .left,
    .right {
      /* width: 200px; */
      height: 200px;
      background-color: pink;
    }

    .left {
      /* 左浮动 */
      float: left;
      margin-left: 20px;
    }

    .right {
      /* 右侧浮动 */
      float: left;
      height: 300px;
      background-color: purple;
    }

    .bottom {
      height: 50px;
      background-color: black;
    }
  </style>
</head>

<body>
  <div class="left">左侧123</div>
  <div class="right">右侧123</div>
  <div class="bottom"></div>
</body>

</html>

特点：

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标，不占用标准流的位置

68326940376

左右布局

html结构

  <div class="mi">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>

css样式

 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    

    .left {
      float: left;
      width: 234px;
      height: 614px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 978px;
      height: 614px;
      background-color: purple;
    }
</style>

效果：

68327060924
区域小li布局

完整写法

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .mi {
      width: 1226px;
      height: 614px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .left {
      float: left;
      width: 234px;
      height: 614px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 978px;
      height: 614px;
      /* background-color: purple; */
    }

    .right li {
      float: left;
      width: 234px;
      height: 300px;
      background-color: pink;
      margin-bottom: 14px;
      margin-right: 14px;
    }

    /* 让第4,8 个li 去掉外边距 */
    .right li:nth-child(4n) {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <div class="mi">
    <div class="left">左侧</div>
    <div class="right">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
  </div>
</body>

</html>
68327178054

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

场景搭建

1680335081694

<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; */
    background-color: pink;
  }

  .left {
    float: left;
    width: 200px;
    height: 300px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 950px;
    height: 300px;
    background-color: orange;
  }

  .bottom {
    height: 100px;
    background-color: brown;
  }

</style>

<div class="top">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>

如果不设置.top 的height属性则会出现这种情况

image-20240428121244869
额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both ，clear属性为指定一个 元素是否必须移动到他之前的浮动元素下面

<style>
.clearfix {
  clear: both;
}
</style>

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>
单伪元素法
  1. 准备 after 伪元素
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  1. 父级使用 clearfix 类
<div class="father clearfix"></div>
双伪元素法
  1. 准备 after 和 before 伪元素
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}
  1. 父级使用 clearfix 类
<div class="father clearfix"></div>
overfow法
.father {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

03-Flex布局（重点）

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

1680335815005

Flex组成

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

组成部分：

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

1680335870554

主轴对齐方式

属性名：justify-content

1680335902526

justify-content: space-between;

显示效果：两侧没缝隙

68319705092 
justify-content: space-around;

效果如下： 记住2倍

68319707308 
justify-content: space-evenly;

效果如下： 记住空隙一样大

68319709395 
 justify-content: center;

效果如下： 经常用于让一个盒子水平居中

68319711654

记忆：

  1. 两侧没缝隙是 between
  2. 缝隙一样大是 evenly
  3. 2倍缝隙是 around
<!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>Document</title>
  <style>
    .box {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* justify-content: space-between; */
      /* justify-content: space-around; */
      justify-content: space-evenly;
      width: 900px;
      height: 200px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>

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

</html>
68327700493

侧轴对齐方式

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

1680335957166

<!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>Document</title>
  <style>
    .box {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* 两侧没缝隙 */
      /* justify-content: space-between; */
      /* 两倍缝隙 */
      /* justify-content: space-around; */
      justify-content: space-evenly;

      /* 侧轴的对齐方式 */
      /* 顶部对齐 */
      /* align-items: flex-start; */
      /* 底部对齐 */
      /* align-items: flex-end; */
      /* 居中对齐 */
      /* align-items: center; */
      /* 默认的 拉伸和父亲一样 */
      align-items: stretch;
      width: 900px;
      height: 500px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      /* height: 200px; */
      background-color: skyblue;
    }
  </style>
</head>

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

</html>
68327830510
盒子水平和垂直居中的写法

68327825491

<!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>Document</title>
  <style>
    .father {
      /* 利用flex实现 */
      display: flex;
      /* 主轴水平居中 */
      justify-content: center;
      /* 侧轴水平居中 */
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

弹性盒子换行

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

属性名：flex-wrap

属性值

  • wrap：换行
  • nowrap：不换行（默认）
小米flex布局
68333601780 
<!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>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .mi {
      /* 父控子 */
      display: flex;
      justify-content: space-between;
      width: 1226px;
      height: 614px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .left {
      width: 234px;
      height: 614px;
      background-color: skyblue;
    }

    .right {
      width: 978px;
      height: 614px;
      background-color: purple;
    }

    .right ul {
      display: flex;
      /* 让li 自动换行 */
      flex-wrap: wrap;
      /* 主轴两侧对齐 */
      justify-content: space-between;

    }

    .right li {
      width: 234px;
      height: 300px;
      background-color: orange;
      list-style: none;
      margin-bottom: 14px;
    }
  </style>
</head>

<body>
  <div class="mi">
    <div class="left"></div>
    <div class="right">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </div>
</body>

</html>

多行对齐方式

如果有多行侧轴对齐，则去找align-content

如果是单行侧轴对齐，则去找 align-items

属性名：align-content

1680335902526

注意：该属性对单行弹性盒子模型无效。

<!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>Document</title>
  <style>
    .box {
      display: flex;
      /* 换行 */
      flex-wrap: wrap;
      /* 主轴对齐 */
      justify-content: space-between;
      /* 侧轴单行控制 */
      /* align-items: center; */
      /* 侧轴多行对齐 */

      /* align-content: center; */
      align-content: space-between;
      width: 1000px;
      /* 亲父亲得有高度 */
      height: 500px;
      border: 3px solid #000;
      margin: 100px auto;
    }

    .box div {
      width: 300px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

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

</html>
68333796448

修改主轴方向

为什么要修改主轴？ 只要父亲添加了display: flex, 所有的子盒子都会一行显示（水平显示） →

但是， 我们很多情况下，需要 盒子垂直竖着显示，此时就需要把主轴修改一下。修改为 竖着 ↓

主轴默认在水平方向，侧轴默认在垂直方向**

属性名：flex-direction

1680335988425

想要如下效果：

68334161214

代码：

<!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>Document</title>
  <style>
    .box {
      display: flex;
      /* 默认主轴是横向 row  */
      /* 更改主轴的方向 我想要1和2盒子竖着排列 */
      flex-direction: column;
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      /* 主轴 */
      justify-content: center;
      /* 侧轴 */
      align-items: center;

    }

    .box div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

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

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：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>Document</title>
  <style>
    .box {
      display: flex;
      width: 80%;
      height: 200px;
      border: 1px solid #000;
    }

    .box span {
      /* 不会区分原来属于什么模式 */
      /* width: 100px;
      height: 100px;
      background-color: pink; */
      flex: 1;
      background-color: pink;
    }

    /* 圣杯布局两侧固定，中间自适应 */
    .left,
    .right {
      width: 100px;
      background-color: skyblue;
    }

    .center {
      flex: 1;
      background-color: purple;
    }

    .center1 {
      flex: 2;
      background-color: pink;
    }
  </style>
</head>

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

  <div class="box">
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="center1">中</div>
    <div class="right">右</div>
  </div>
</body>

</html>
image-20240428143045302

height: 100px;
background-color: pink; */
flex: 1;
background-color: pink;
}

/* 圣杯布局两侧固定，中间自适应 */
.left,
.right {
  width: 100px;
  background-color: skyblue;
}

.center {
  flex: 1;
  background-color: purple;
}

.center1 {
  flex: 2;
  background-color: pink;
}
1 2 3 4
左
中
中
右
~~~ image-20240428143045302
CSS之Flex布局
qq_57907966的博客
02-18 1176
Flex布局
前端知识——css之flex布局
热门推荐
Caleb的博客
05-20 3万+
1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex...
HTML5基础——22、网页布局方式
最新发布
阿赵的博客
10-27 1438
这次来学习一下网页布局的几种方式
CSS之flex布局
dachaoxuexi的博客
02-13 1849
</div>.item1 {.item2 {.item3 {.item4 {
CSS flex布局
meteorshower2013的博客
07-10 338
学习参考 微信小程序开发指南： https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a 阮一峰博客： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuic...
CSS flex布局
Glichi的博客
07-12 718
任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览器必须加上前缀-webkit .box{ display: -webkit-flex; /* Safari */ display: flex; } ++设置flex...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
HTML前端开发-- Flex布局详解及实战
dazhong2012的专栏
12-02 2137
Flex布局，全称为，是一种现代CSS布局技术，它提供了一种更有效的方式来设计响应式布局和复杂页面布局。本文将详细介绍Flex布局的基本概念、属性以及实战应用。
flex布局Flex实现常见布局的汇总
04-11
先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素...
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
flex布局.html
06-06
flex布局.html
Css-flex 布局
阑珊伊人
05-05 873
Flex(Flexible Box)布局意为”弹性布局”,是CSS3最受欢迎的属性之一，简洁、快速，为盒状模型提供了最大的灵活性。 但是在使用该属性过程中，我们需要注意两点： Flex属性在webkit内核的浏览器中使用时，必须加上-webkit-前缀。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 容器的属性 Flex具有以下六种容器属性。 ...
HTML布局之flex布局
weixin_43183219的博客
01-03 9250
flex布局的功能、容器、项目、主轴、交叉轴的介绍以及对容器属性、项目属性的详细讲解、实例演示
CSS中的flex布局
weixin_67644104的博客
01-15 6878
CSS中的flex布局
HTML——flex布局
qq_45152044的博客
01-19 9455
flex布局
Html——flex布局 弹性布局
chhhhh0403的博客
05-14 1万+
以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案。 一、flex布局的语法 块级元素 ：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示 行内元素 ：display: inline-flex ———— 将容器盒模型作为内联级弹性伸缩盒显示 设置flex布局后，flex item的float、clear和vertical-align 属性都失效 flex布局默认为横向 二、容器属性 flex的排列属性： 元素名称 说明
Flex布局
Elltor
08-27 721
在我看书学习flex布局有疑惑后，在网上搜到了这篇文章，讲的很详细，一遍就差不多了就懂flex布局了，感谢原作者！ 上上下下读五六遍，在其中纠正了一些错别字、加粗了一些文字、添加了一些标点，会使文章读起来更顺畅些，以后要像这样写博客。 转载地址：https://www.cnblogs.com/dreamperson/p/9367008.html 博主主页：https://www.cnblog...
HTML 中的 Flex 布局
firstcode666的博客
03-03 1346
一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 1 2 3 内联元素也可以使用 Flex 布局。 .box{ display: inline-flex; } 1 2 3 Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Saf
HTML Flex 布局
前人栽树，后人乘凉。
02-23 2487
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。
htmlflex布局
09-13
HTML Flex布局是一种用于构建灵活且可响应的页面布局的技术。它基于Flexbox模型，通过将元素放置在一个Flex容器中，并使用灵活的属性和值来指定元素的行为和位置。 要使用Flex布局，首先需要创建一个Flex容器。可以通过在父容器的CSS样式中设置`display: flex;`来将其声明为Flex容器。如下所示： ```html <div class="flex-container"> <!-- Flex items go here --> </div> ``` 然后，可以在Flex容器中放置Flex项（即子元素）。这些Flex项可以根据需要进行排列、对齐和调整大小。以下是一些常用的Flex属性： - `flex-direction`：指定Flex项的排列方向（row、column、row-reverse、column-reverse）。 - `justify-content`：指定Flex项在主轴上的对齐方式（flex-start、flex-end、center、space-between等）。 - `align-items`：指定Flex项在交叉轴上的对齐方式（flex-start、flex-end、center等）。 - `flex-grow`：指定Flex项在剩余空间中的放大比例。 - `flex-shrink`：指定Flex项在空间不足时的缩小比例。 - `flex-basis`：指定Flex项在分配多余空间之前的初始大小。 通过灵活地使用这些属性，可以轻松实现各种不同的页面布局和响应式设计效果。 这只是Flex布局的简要介绍，如果你想了解更多详细的信息，可以参考优快云上的相关教程或Flexbox的官方文档。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值