CSS-Flex布局

小鱼儿 2024-03-22 14:02 85阅读 0赞

01-标准流

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

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMFkJ5qr-1683537928034)(assets/1680334840709.png)\]

02-浮动

基本使用

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

属性名：float

属性值

  • left：左对齐

  • right：右对齐

    one

    two

特点：

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

产品区域布局

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFWfyxFr-1683537928036)(assets/1680335016853.png)\]

HTML标签
  1. <!-- 版心：左右，右面：8个产品 → 8个 li -->
  2. <div class="product">
  3.   <div class="left"></div>
  4.   <div class="right">
  5.     <ul>
  6.       <li></li>
  7.       <li></li>
  8.       <li></li>
  9.       <li></li>
  10.       <li></li>
  11.       <li></li>
  12.       <li></li>
  13.       <li></li>
  14.     </ul>
  15.   </div>
  16. </div>
CSS样式
  1. <style>
  2.   * {
  4.     margin: 0;
  5.     padding: 0;
  6.   }
  8.   li {
  10.     list-style: none;
  11.   }
  13.   .product {
  15.     margin: 50px auto;
  16.     width: 1226px;
  17.     height: 628px;
  18.     background-color: pink;
  19.   }
  21.   .left {
  23.     float: left;
  24.     width: 234px;
  25.     height: 628px;
  26.     background-color: skyblue;
  27.   }
  29.   .right {
  31.     float: right;
  32.     width: 978px;
  33.     height: 628px;
  34.     background-color: brown;
  35.   }
  37.   .right li {
  39.     float: left;
  40.     margin-right: 14px;
  41.     margin-bottom: 14px;
  42.     width: 234px;
  43.     height: 300px;
  44.     background-color: orange;
  45.   }
  47.   /* 第四个li和第八个li 去掉右侧的margin */
  48.   .right li:nth-child(4n) {
  50.     margin-right: 0;
  51.   }
  53.   /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
  54. </style>

清除浮动

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

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

场景搭建

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SDri9r26-1683537928037)(assets/1680335081694.png)\]

  1. <style>
  2.   .top {
  4.     margin: 10px auto;
  5.     width: 1200px;
  6.     /* height: 300px; */
  7.     background-color: pink;
  8.   }
  10.   .left {
  12.     float: left;
  13.     width: 200px;
  14.     height: 300px;
  15.     background-color: skyblue;
  16.   }
  18.   .right {
  20.     float: right;
  21.     width: 950px;
  22.     height: 300px;
  23.     background-color: orange;
  24.   }
  26.   .bottom {
  28.     height: 100px;
  29.     background-color: brown;
  30.   }
  32. </style>
  34. <div class="top">
  35.   <div class="left"></div>
  36.   <div class="right"></div>
  37. </div>
  38. <div class="bottom"></div>
额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

  1. <style>
  2. .clearfix {
  4.   clear: both;
  5. }
  6. </style>
  8. <div class="father">
  9.   <div class="left"></div>
  10.   <div class="right"></div>
  11.   <div class="clearfix"></div>
  12. </div>
单伪元素法

  1. 准备 after 伪元素

    .clearfix::after {

    content: “”;
    display: block;
    clear: both;
    }

  2. 父级使用 clearfix 类

双伪元素法

  1. 准备 after 和 before 伪元素

    / before 解决外边距塌陷问题 /
    / 双伪元素法 /
    .clearfix::before,
    .clearfix::after {

    content: “”;
    display: table;
    }

    / after 清除浮动 /
    .clearfix::after {

    clear: both;
    }

  2. 父级使用 clearfix 类

overfow法
  1. .father {
  3.   margin: 10px auto;
  4.   width: 1200px;
  5.   /* height: 300px; */
  6.   background-color: pink;
  8.   overflow: hidden;
  9. }

03-Flex布局

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

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

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4GZg7oF7-1683537928039)(assets/1680335815005.png)\]

Flex组成

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

组成部分：

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

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdCHBjjm-1683537928040)(assets/1680335870554.png)\]

主轴对齐方式

属性名：justify-content

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PtJKUi10-1683537928042)(assets/1680335902526.png)\]

侧轴对齐方式

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

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRU97iKs-1683537928044)(assets/1680335957166.png)\]

修改主轴方向

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

属性名：flex-direction

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pw5VScK6-1683537928046)(assets/1680335988425.png)\]

弹性伸缩比

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

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

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

属性名：flex-wrap

属性值

  • wrap：换行
  • nowrap：不换行（默认）

行内对齐方式

属性名：align-content

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lkYe9TPV-1683537928047)(assets/1680336183457.png)\]

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

发表评论

表情：
评论列表 （有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css - 布局 - rem布局

    物理像素 物理像素是屏幕设备的尺寸单位，在不同的设备中1px里可以容纳的像素颗粒是不相同的，所以1px这个单位其实也是有N个像素颗粒填充的。同一尺寸屏幕的每个像素点所能容

    淩亂°似流年淩亂°似流年/ 0 赞/ 539 阅读

    相关 常见布局—弹性布局

    在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。 说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 490 阅读