首页 > 其他分享 >CSS flex布局（详解）

CSS flex布局（详解）

时间：2024-01-08 14:02:35浏览次数：31  
标签：flex color content width 详解 background 对齐 CSS


前面我们学了很多基本的布局，现在我们将学习一种新的布局方式，这种布局方式更为常用，并且可以缩减很多不必要的代码。

我们来看一个实际中的布局。

CSS flex布局（详解）_前端

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .head {
      width: 400px;
      height: 400px;
      display: flex;
      flex-direction: column;
    }

    .head .top {
      display: flex;
      flex: 1;
      background-color: red;
    }

    .top-Top {
      flex: 1;
      background-color: yellow;
    }

    .top-Bottom {
      flex: 1;
    }

    .head .bottom {
      background-color: pink;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .bottom-Top{
      flex: 1;
      background-color: blue;
    }
    .bottom-Bottom{
      flex: 1;
    }
  </style>
</head>

<body>
  <div class="head">
    <div class="top">
      <div class="top-Top">
        上边的左面
      </div>
      <div class="top-Bottom">
        上边的右面
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-Top">
        下边的上面
      </div>
      <div class="bottom-Bottom">
        下边的下面
      </div>
    </div>
  </div>
</body>

</html>
是不是发现比传统写法定位这种方便并且当你调整大的盒子的大小时，其他的小盒子跟着一起变化

flex布局

我们来复习一下css中的坐标轴方向：注意这个坐标轴的方向是不用于数学中的直角坐标，他是以页面左上角为原点的坐标轴。其中主轴默认的是x轴

CSS flex布局（详解）_可选值_02

属性：

  1. flex-direction：指定 flex 容器内项目的排列方向。
  • 可选值：
  • row：水平方向，从左到右排列（默认值）。
  • row-reverse：水平方向，从右到左排列。
  • column：垂直方向，从上到下排列。
  • column-reverse：垂直方向，从下到上排列。
  1. justify-content：定义 flex 容器内项目沿主轴的对齐方式。
  • 可选值：
  • flex-start：靠近主轴起点对齐（默认值）。
  • flex-end：靠近主轴末尾对齐。
  • center：居中对齐。
  • space-between：两端对齐，项目之间的间隔相等。
  • space-around：每个项目两侧的间隔相等，项目之间的间隔是它们的两倍。
  1. align-items：定义 flex 容器内项目沿交叉轴的对齐方式。
  • 可选值：
  • flex-start：靠近交叉轴起点对齐。
  • flex-end：靠近交叉轴末尾对齐。
  • center：居中对齐（默认值）。
  • baseline：基线对齐。
  • stretch：拉伸以填充容器。
  1. flex-wrap：定义 flex 容器内项目是否换行。
  • 可选值：
  • nowrap：不换行，所有项目在一行内排列（默认值）。
  • wrap：换行，超出容器宽度时进行换行。
  • wrap-reverse：反向换行，超出容器宽度时从底部开始换行。
  1. align-content：定义多行或多列的 flex 容器内项目的对齐方式，只有在存在多行或多列时才生效。
  • 可选值：
  • flex-start：靠近交叉轴起点对齐。
  • flex-end：靠近交叉轴末尾对齐。
  • center：居中对齐。
  • space-between：两端对齐，项目之间的间隔相等。
  • space-around：每个项目两侧的间隔相等，项目之间的间隔是它们的两倍。
  • stretch：拉伸以填充容器。

flex-direction

flex-direction设置主轴方向，默认按照水平布局

CSS flex布局（详解）_html_03

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    .contains{
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
    }
    .left{
      flex:1;
      background-color: yellow;
    }
    .right{
      flex:1;
    }
  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
  </div>
</body>
</html>

当我改变flex-direction：column此时显示得是按照垂直排列

CSS flex布局（详解）_css_04

reserve主要是写排列顺序的。正常时先写得先排，但是加上revser的时候会颠倒顺序。如

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    .contains{
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
      flex-direction:column-reverse;
    }
    .left{
      flex:1;
      background-color: yellow;
    }
    .right{
      flex:1;
    }
  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
  </div>
</body>
</html>

justify-content：定义 flex 容器内项目沿主轴的对齐方式。

justify-content：:center水平居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    body{
      display: flex;
      justify-content: center;
    }
    .contains{
      width: 300px;
      height: 300px;
      background-color: pink;
      display: flex;
      flex-direction:column-reverse;
    }
    .left{
      flex:1;
      background-color: yellow;
    }
    .right{
      flex:1;
    }
  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
  </div>
</body>
</html>

CSS flex布局（详解）_可选值_05

justify-content: start；水平最左边，初始位置

CSS flex布局（详解）_css_06

justify-content: end；水平最右端

CSS flex布局（详解）_html_07

justify-content: space-between；按照默认的鹅direction排列，保证间隔相同，左右贴近边框

CSS flex布局（详解）_css3_08

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    .contains{
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: space-between;
    }
    .left{
      width: 50px;
      background-color: yellow;
    }
    .right{
      width: 50px;
      background-color: pink;
    }
  .right1{
      width: 50px;
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="contains">
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
    <div class="right1">
      右边
    </div>
  </div>
</body>
</html>

align-items指的时垂直方向上的排列，使用和justify-content一样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .head{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .top{
      justify-content: center;
      align-items: center ;
      display: flex;
      width: 1200px;
      height: 500px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="head">
    
    </div>
  </div>
</body>
</html>

CSS flex布局（详解）_css3_09

flex-wrap：定义 flex 容器内项目是否换行。

CSS flex布局（详解）_css_10

CSS flex布局（详解）_可选值_11

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .head{
      width: 100px;
      height: 100px;
      background-color: pink;
      display: flex;
      flex-wrap: wrap;
    }
    .l{
      width: 10px;
      height: 10px;
      background-color: red;
      margin:3px;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="head">
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
      <div class="l"></div>
    </div>
  </div>
</body>
</html>

align-content：定义多行或多列的 flex 容器内项目的对齐方式，只有在存在多行或多列时才生效。

align-content 和 align-items 是 Flexbox 布局中用于控制项目在交叉轴上对齐的两个属性，它们之间有一些区别：

  • align-content：
  • 只在 flex 容器有多行时生效，用来定义多行的对齐方式。
  • 如果容器内只有一行，align-content 不会生效。
  • 适用于多行的情况，可以控制多行之间的对齐方式，比如居中对齐、沿着交叉轴均匀分布等。
  • align-items：
  • 用来定义单行内项目在交叉轴上的对齐方式。
  • 如果 flex 容器是单行的，align-items 控制整个项目集合在交叉轴上的对齐方式。
  • 适用于单行的情况，可以控制项目在交叉轴上的对齐方式，比如居中对齐、顶部对齐、底部对齐等。

标签：flex,color,content,width,详解,background,对齐,CSS
From： https://blog.51cto.com/u_16426526/9143969

相关文章

  • css动画(详解)
    你是否惊讶于为啥别人的网站效果那么好，自己的只有简单的布局，和图片加持。没事，这篇博客将带你了解制作动画，让你的网页变得更加生动。动画的制作：制作动画，我们需要选择动画的类型，这里我采用的是使用keyframes类型的关键帧动画，定义一个动画@keyframes动画名称{关键帧的相应执行操......
  • CSS常用效果制作（持续更新）
    当掌握前面的那些基础知识后，现在我们需要对我们所学知识进行练习所以,让我们来练习制作一些炫酷的界面吧。1.制作一个三角形<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-sc......
  • 详解Java死锁-检测与解决
    第1章：引言大家好，我是小黑，咱们今天来聊聊死锁。特别是对于咱们这些Java程序员来说，死锁就像是隐藏在暗处的陷阱，稍不注意就会掉进去。但别担心，小黑今天就来带大家一探究竟，看看怎么样才能避免这个陷阱。什么是死锁？简单来说，死锁就是两个或多个进程互相等待对方释放资源，结果大家都动......
  • Java中的InputStream和OutputStream详解
    引言在Java编程中，处理输入输出是日常任务的一部分，而流（Stream）是实现输入输出的核心概念。在JavaI/OAPI中，InputStream和OutputStream是所有字节流类的基础。本文将详细介绍这两个类及其在Java中的应用。什么是InputStream和OutputStream?InputStream是JavaI/O库中的一个抽象类，它......
  • C++指针详解
    定义：指针是一个整数，一种存储内存地址的数字内存就像一条线性的线，在这条街上的每一个房子都有一个号码和地址类似比喻成电脑，这条街上每一个房子的地址是一个字节我们需要能够准确找到这些地址的方法，用来读写操作因此，指针就是这些地址。不要考虑类型，无论是什么类型的指针，都是用来保......
  • Unity3D UGUI的Button组件的介绍及使用详解
    Unity3D是一款功能强大的游戏开发引擎，而UGUI是Unity3D提供的一套用户界面系统。在UGUI中，Button组件是最常用的组件之一，本文将详细介绍Button组件的使用方法和相关技术细节。对啦！这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白，也有一些正在从事游戏开发的技术大......
  • 详解Java中的原子操作
    第1章：什么是原子操作大家好，我是小黑，面试中一个经常被提起的话题就是“原子操作”。那么，到底什么是原子操作呢？在编程里，当咱们谈论“原子操作”时，其实是指那些在执行过程中不会被线程调度机制打断的操作。这种操作要么完全执行，要么完全不执行，没有中间状态。这就像是化学里的原子，不......
  • CAN总线基础详解以及stm32的CAN控制器
    CAN简介CAN（ControllerAreaNetwork），是IOS国际标准化的串行通信协议。为了满足汽车产业的“减少线束的数量”、“通过多个LAN，进行大量数据的高速通信”的需求。CAN总线的发展史：低速CAN(ISO11519)通信速率10~125Kbps，总线长度可达1000米高速CAN(ISO11898)通信速率125Kbps~1Mbps，总......
  • 原生 CSS 中类似 Sass 的嵌套
    如果你和我一样觉得Sass的CSS嵌套功能非常有用，那么你一定会很高兴地知道，我们的好日子就要来了。因此，如果你不知道，Sass的CSS嵌套功能允许您将CSS选择器嵌套在其他选择器中。例如，你可以这样写：.parent{.child{color:red;}}这将被编译成以下CSS。.par......
  • CentOS7 安装配置SFTP服务器详解
    https://blog.csdn.net/weixin_45688268/article/details/126355365CentOS7安装配置SFTP服务器详解AquaMriusC于2022-08-1521:39:26发布阅读量1w 收藏56点赞数7分类专栏：虚拟机与云服务器文章标签：linuxcentosssh版权华为云开发者联盟该内容已被华为云开发者联盟社区收......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99