[css][移动web]flex布局的简单运用。（子盒子垂直水平居中）（圣杯布局，双飞翼布局）

最新推荐文章于 2024-06-02 17:14:20 发布

原创最新推荐文章于 2024-06-02 17:14:20 发布 · 741 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

本文介绍了移动Web开发中最常用的Flex布局，强调其在移动端的广泛适用性和对PC端兼容性问题的规避。主要内容包括：主轴和侧轴对齐方式、伸缩比的设置，以及如何利用Flex实现子元素在父元素中的垂直水平居中和圣杯（双飞翼）布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天讲一下移动web最常用的flex布局。虽然flex布局方式在在pc端存在兼容性的问题，但是在移动端上就完全不用担心这个问题，可以放心使用。flex布局方式可以大大的提高编程的效率。

Flex布局

弹性布局

作用：
基于flex精确灵活的控制块级盒子的布局方式，避免浮动布局中脱离文档流的现象发生
flex布局非常适合结构化布局
设置方式
给子元素最近的父元素添加 display：flex，子元素就可以自动挤压或拉伸
组成部分
弹性容器（父盒子）
弹性盒子（子盒子）
主轴（x轴）
侧轴（y轴）

主轴对齐方式

justify-content调节元素在主轴的对齐方式（添加到父元素）

在这里插入图片描述
标红的属性值最常用，要记住。

侧轴对齐方式

align-items调节元素在侧轴的对齐方式（添加到父元素）

在这里插入图片描述

align-self控制某个弹性盒子对齐方式（添加到子元素）

伸缩比

（就是指每个盒子占几份）

使用flex属性修改弹性盒子伸缩比（给子盒子添加）

属性
flex：值；
取值分类
数值（整数）

ps：

只占父盒子剩余尺寸
只给子盒子添加这个属性
同时设置flex和weight，flex优先级高。

小结

在flex中，标签不再分类，也就是说没有块级元素和行内元素之分，可以给任意元素添加宽高
flex不存在脱标的情况，基本淘汰了浮动，也不用清除浮动
在pc端存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex

案例：
1.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: 300px;
      height: 300px;
      background-color: pink;
      margin: auto;
      justify-content: center;
      align-items: center;

    }
    .box1{
      width: 100px;
      height: 100px;
      background-color: gray;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">

    </div>
  </div>
</body>
</html>

2.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>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .cup{
      display: flex;
      width: 100%;
      height: 100px;
      /* background-color: pink; */
    }
    
    span{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
     .cup span:nth-child(2){
      flex: 1;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
     
  </style>
</head>
<body>
  <div class="cup">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>
</html>