css—flex布局

已于 2023-01-18 23:51:41 修改
阅读量2.2k 收藏 9
点赞数 4
文章标签： 学习 css css3
于 2023-01-18 23:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64085523/article/details/128722222
版权

css—flex布局

一.简介：

1.定义

flex是flexible box的缩写，意为“弹性布局”，用来为盒型模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

2.布局原理

采用flex布局的元素，称为flex容器（flex container），简称“容器“，它的所有子元素自动成为容器成员，称为flex项目，简称"项目"。
简单来说：就是通过给父盒子添加flex属性，来控制盒子的位置及排列方式。

二.容器container（父元素）的属性

  • flex-direction : 设置主轴的方向
  • justify-content ：设置主轴上子元素的排列方式
  • flex-wrap : 设置子元素是否换行
  • flex-flow : 复合元素，相当于同时设置了 flex-direction 和 flex-wrap
  • align-items : 设置侧轴上的子元素排列方式方式（单行）
  • align-content : 设置侧轴上的子元素排列方式（多行）

1.flex-direction 设置主轴方向

//注 : 默认主轴为 x 轴，且主轴和侧轴是可以变化的，通过 flex-direction 设置谁为主轴，剩下的就是侧轴，子元素根据主轴排列。

  1. row (默认值) : 默认从左到右
  2. row-reverse : 从右到左
  3. column : 从上到下
  4. column-reverse : 从下到上
<!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>
        div {
            /* 父元素添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: grey;
            /* 默认主轴为x轴 row */
            /* flex-direction: row; */

            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

flex-direction: row;（默认值，从左到右）

flex-direction: row;(默认值)l
flex-direction: row-reverse;（从右到左）
在这里插入图片描述
flex-direction: column;（从上到下）
在这里插入图片描述
flex-direction: column-reverse;（从下到上）
在这里插入图片描述

2.justify-content 设置主轴上子元素的排列方式

1.flex-start（默认值） : 从头开始，如果主轴为 x 轴则为从左到右
2.flex-end : 从尾部开始
3.center ：主轴上居中对齐
4.space-around : 平均剩余空间
5.space-between : 两边贴边再平分剩余空间

<!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>
        div {
            /* 父元素添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: grey;
            /* 主轴为 x 轴 row */
            flex-direction: row;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

flex-start（默认值） : 从头开始，如果主轴为 x 轴则为从左到右
在这里插入图片描述
flex-end : 从尾部开始
在这里插入图片描述
center ：主轴上居中对齐
在这里插入图片描述
space-around : 平均剩余空间
在这里插入图片描述
space-between : 两边贴边再平分剩余空间

在这里插入图片描述

3.flex-wrap 设置子元素是否换行

1.nowrap（默认值） : 不换行
2.wrap : 换行

<!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>
        div {
            /* 父元素添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: grey;
            /* felx布局中默认子元素不换行，装不开则会缩小子元素的宽度，以放到父元素中 */
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

nowrap（默认值） : 不换行
//注：felx布局中默认子元素不换行，装不开则会缩小子元素的宽度，以放到父元素中
在这里插入图片描述
wrap: 换行

在这里插入图片描述

4.flex-flow 复合元素，相当于同时设置了 flex-direction 和 flex-wrap

flex-flow: [flex-direction] [flex-wrap]

2+3的组合，详细见上

5.align-items 设置侧轴上的子元素排列方式方式（单行）

1.flex-start（默认值） : 从上到下
2.flex-end : 从下到上
3.center : 挤在一起居中（垂直居中）
4.stretch : 拉伸

<!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>
        div {
            /* 父元素添加flex属性 */
            display: flex;
            width: 800px;
            height: 400px;
            background-color: grey;
            justify-content: center;
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
        }

        div span {
            width: 150px;
            height: 100px; 
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

flex-start（默认值） 从上到下
在这里插入图片描述
.flex-end 从下到上
在这里插入图片描述
.center 挤在一起居中（垂直居中）

在这里插入图片描述

<!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>
        div {
            /* 父元素添加flex属性 */
            display: flex;
            width: 800px;
            height: 400px;
            background-color: grey;
            justify-content: center;
            align-items: stretch;
        }

        div span {
            width: 150px;
            /* height: 100px; */
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

stretch 拉伸

在这里插入图片描述

6.align-content : 设置侧轴上的子元素排列方式（多行）

  1. felx-start : 在侧轴头部开始排列
  2. flex-end : 在侧轴尾部开始排列
  3. center : 在侧轴中间显示
  4. space-around : 子轴在侧轴平均剩余空间
  5. sapce-betwen : 子轴在侧轴先分布在两端，再平分剩余空间
  6. stretch : 设置子元素高度评分父元素高度
<!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>
        div {
            /* 父元素添加flex属性 */
            display: flex;
            width: 600px;
            height: 400px;
            background-color: grey;
            justify-content: center;
            flex-wrap: wrap;
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-around; */
            /* align-content: space-between; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

felx-start : 在侧轴头部开始排列
在这里插入图片描述
flex-end : 在侧轴尾部开始排列

在这里插入图片描述
center : 在侧轴中间显示

在这里插入图片描述
space-around : 子轴在侧轴平均剩余空间

在这里插入图片描述
sapce-betwen : 子轴在侧轴先分布在两端，再平分剩余空间

在这里插入图片描述

三,项目（item）子元素的属性

  • flex 属性 : 定义子项目分配的剩余空间，用flex表示占的份数
  • align-self : 控制子项自己在侧轴上的排列方式
  • order : 定义项目的排列顺序

1.flex 属性 : 定义子项目分配的剩余空间，用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>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: grey;
            margin: 0 auto;
        }

    section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: red;
    }

    section div:nth-child(2) {
        flex: 1;
        background-color: green;
    }

    section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

在这里插入图片描述

2.align-self : 控制子项自己在侧轴上的排列方式

//注align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。其默认值为auto，表示继承父元素的align-items属性，没有父元素则等同于stretch

<!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>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: red;
            margin: 0 auto;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: grey;
            margin-right: 5px;
        }

        div span:nth-child(2) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述

3.order : 定义项目的排列顺序

//注：默认值为0，数值越小越靠前

<!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>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: red;
            margin: 0 auto;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: grey;
            margin-right: 5px;
        }

        div span:nth-child(2) {
            align-self: flex-end;
        }

        div span:nth-child(3) {
            order: -1;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述

明月不是舒皮
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
css中的flex（弹性）布局
热门推荐
domunweb的博客
07-08 3万+
flex 弹性布局 一. flex 解释 1、flex 布局 为 flexible BOX 的缩写 ，意思为 弹性布局。 2、块级元素和行内块级元素都可以使用flex布局 3、Webkit内核的浏览器，需要加上-webkit前缀。 二. flex 容器 属性 1、flex-direction 此属性决定主轴的方向 .flex{ flex-direction: row; // (默认值) 主轴水平...
CSS基本布局——flex布局
weixin_52148548的博客
01-07 2042
文章目录flex基本概念flex布局两个重要概念存在形式flex布局模型：容器属性flex-directionjustify-contentalign-itemsflex-wrapalign-content项目属性orderalign-selfflex-growflex-shrinkflex-basis flex基本概念 flex布局 Flexible布局，即弹性盒子布局 两个重要概念 开启了flex布局的元素叫做flex container flex container里边的直接子元素叫做fl
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
2401_84093407的博客
04-03 1032
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
CSS中的flex布局
weixin_67644104的博客
01-15 5793
CSS中的flex布局
css布局之flex布局
qq_42369064的博客
05-29 1802
文章目录一、flex布局原理布局原理二、flex布局父项常见属性【1】flex-direction【2】justify-content【3】flex-wrap【4】align-content【5】align-items【6】flex-flow三、flex布局子项常见属性【1】flex【2】align-self【3】order 一、flex布局原理 flex是flexible Box的缩写，意思是“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都能指定为flex容器。 当我们为父盒子设为fle
CSS之flex布局
weixin_45604020的博客
06-30 3291
和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单（推荐使用）。弹性容器+弹性盒子+主轴+侧轴。
前端知识——css之flex布局
Caleb的博客
05-20 2万+
1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex...
CSS初入门：flex布局
lalala_dxf的博客
03-21 6077
flex布局 简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。任何一个容器都可以指定为 Flex 布局。 关于flex弹性盒模型 采用 Flex 布局的元素，称为 Flex 容器（flex con
详解CSS中的flex布局
DZQ1223的博客
06-13 4165
弹性盒子（display: flex）是把设置此属性的这块区域（设置此属性的元素）变为弹性盒子，使得此元素的直接子元素按照从左到右的顺序一行排列如果盒子变小（比子元素的宽度或高度小），里面的直接子元素会随着盒子的变化而变化，同时一直保持从左往右一行排列的布局。当主轴为水平方向的时候，若设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。默认值：auto，即项目本来的大小（采用元素内容的尺寸）。
今日css Flex布局相关知识
06-09
容器属性相关练习
css Flex布局的可伸缩性(Flexibility)
09-24
主要介绍了css Flex布局的可伸缩性(Flexibility)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
限流的学习
weixin_43675252的博客
05-01 314
限流算法：滑动窗口算法滑动日志算法漏桶算法令牌桶算法。
Build a Large Language Model (From Scratch) 从头开始构建大型语言模型(第二章)学习笔记
Czi.的博客
04-29 1121
LLM需要将文本数据转换为数值向量，称为嵌入，因为它们无法处理原始文本。嵌入将离散数据（如单词或图像）转换为连续向量空间，使它们与神经网络操作兼容。第一步，将原始文本分解为tokens，这些tokens可以是单词或字符。然后，tokens被转换为整数表示形式，称为token IDs。可以添加特殊tokens（例如和）来增强模型的理解并处理各种上下文，例如未知单词或标记(marking)不相关文本之间的边界。
力扣数据库题库学习（4.28日）--1587. 银行账户概要 II
Jesse_Kyrie的博客
04-28 254
对于力扣题1587. 银行账户概要 II的解答，提供解题思路与解题方法，知识点为:1. GROUP BY 2. SUM 3. LEFT JOIN 4. HAVING
场景文本检测&识别学习 day08（无监督的Loss Function、代理任务、特征金字塔）
最新发布
丿罗小黑的博客
05-03 243
无监督的Loss Function（无监督的目标函数） 根据有无标签，可以将模型的学习方法分为：无监督、有监督两种。而自监督是无监督的一种 无监督的目标函数可以分为以下几种： 生成式网络的做法，衡量模型的输出和固定的目标之间的差距，主要考虑输入数据是怎么分布的，即 “给定Y，如何生成X”。如auto-encoder：输入一张干扰过的图，通过编码器-解码器，然后得出一张还原后的图，通过对比原图和生成的还原后的图之间的差异 判别式网络的做法，衡量模型的输出和固定的目标之间的差异，主要考虑输入和输出的映射关系
[C++基础学习-04]----C++数组详解
一伦明悦的博客
05-02 340
一维数组和二维数组是在编程中常用的数据结构，它们具有不同的特点和适用场景。1、一维数组一维数组是一种线性结构，它由一系列按顺序存储的元素组成；通常用于存储一组相同类型的数据，例如整数、浮点数、字符等；访问速度比较快，通过数组下标即可快速定位和访问特定元素；适用于存储列表、向量、序列等线性数据。2、二维数组二维数组是一种表格状的结构，它由一维数组组成的数组，用于存储表格数据或矩阵数据；通常用于存储二维结构的数据，例如游戏地图、图像数据、二维表格等；
css flex布局
04-05
CSS Flex布局是一种弹性盒子布局模型，它可以让容器中的子元素自动适应空间分配，并且可以轻松地实现对齐、排列和分布。 Flex布局中有两个重要的概念：容器和项目。容器是指包含Flex布局的父元素，而项目则是指容器中的子元素。 以下是一些Flex布局的基本属性： 1. display: flex; - 将元素设置为Flex容器，使其子元素成为Flex项目。 2. flex-direction: row/column; - 定义Flex容器中项目的排列方向，可以是水平方向（默认）或垂直方向。 3. justify-content: flex-start/end/center/space-between/space-around; - 定义Flex容器中项目的水平对齐方式。 4. align-items: flex-start/end/center/baseline/stretch; - 定义Flex容器中项目的垂直对齐方式。 5. flex-wrap: nowrap/wrap/wrap-reverse; - 定义Flex容器中项目的换行方式。 6. flex-grow: number; - 定义Flex项目的放大比例。 7. flex-shrink: number; - 定义Flex项目的缩小比例。 8. flex-basis: length/initial/auto; - 定义Flex项目的基准大小。 9. flex: flex-grow flex-shrink flex-basis; - 以上三个属性的缩写形式。 10. align-self: flex-start/end/center/baseline/stretch/auto; - 定义Flex项目自身的垂直对齐方式，覆盖容器的align-items属性。 以上是Flex布局的一些基本属性，通过这些属性的组合，可以实现各种不同的布局效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明月不是舒皮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值