Css提高——flex布局及其相关属性

目录：

1、传统布局与flex布局的区别

2、flex的布局原理

 3、flex常见的父项属性

3.1、flex-direction ：设置主轴的方向

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

3.3、flex-wrap 设置子元素是否换行

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

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

         3.6、flex-flow（flex-direction 和 flex-wrap 属性的复合属性

 4、flex常见的子项属性 

4.1、flex

4.2、align-self 控制子项自己在侧轴上的排列方式

1、传统布局与flex布局的区别

2、flex的布局原理

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

  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

 3、flex常见的父项属性

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

3.1、flex-direction ：设置主轴的方向

1、主轴和侧轴的概念

2、flex-direction的属性值

3、例子

如果我想要将flex的子元素从右往左排列的话，则需要对父元素添加flex-direction: row-reverse;属性

1、代码：
<!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>
        .main {
            width: 800px;
            height: 600px;

            margin: 0 auto;
            border-radius: 12px;

            background-color: skyblue;

            display: flex;

            flex-direction: row-reverse;

        }

        span {
            width: 200px;
            margin-left: 10px;
            height: 100%;

            border-radius: 12px;

            background-color: pink;


        }
    </style>
</head>

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

</html>
2、 效果图

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

1、justify-content 的属性值：

2、例子：
2、代码： 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 我们现在的主轴是y轴 */
            flex-direction: column;
            /* justify-content: center; */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
3、效果图：

3.3、flex-wrap 设置子元素是否换行

1、flex-wrap 属性值

2、例子
1、代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>
2、效果图

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

1、align-items 属性值

2、例子
1、代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: column;
            justify-content: center;
            /* 我们需要一个侧轴居中 */
            /* 拉伸，但是子盒子不要给高度 */
            /* align-items: stretch; */
            align-items: center;
            /* align-content: center; */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
2、效果图：

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

1、align-content属性值

2、例子
1、代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            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>
2、效果图：

3.6、flex-flow（flex-direction 和 flex-wrap 属性的复合属性）

1、flex-flow 属性值

 4、flex常见的子项属性 

4.1、flex

1、flex属性

2、例子
 1、代码：
<!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>
        .main {
            width: 800px;
            height: 400px;

            background-color: skyblue;
            margin: 0 auto;
            border-radius: 12px;

            display: flex;
        }

        span {
            flex: 1;
            background-color: green;
            height: 100px;
            border-radius: 12px;
            margin-left: 10px;
        }

        .main span:nth-child(2) {
            flex: 2;
            background-color: blue;
            height: 100px;
            border-radius: 12px;
            margin-left: 10px;
        }
    </style>
</head>

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

</html>
2、效果图

4.2、align-self 控制子项自己在侧轴上的排列方式&

1、定义

align-self

order：

2、例子：
1、代码：
<!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>
        .main {
            width: 90%;
            height: 400px;

            background-color: skyblue;
            margin: 0 auto;
            border-radius: 12px;


            display: flex;
            flex-direction: row;
        }

        span {
            flex: 1;
            background-color: green;
            height: 100px;
            border-radius: 12px;
            margin-left: 10px;
        }

        .main span:nth-child(2) {
            flex: 2;
            background-color: blue;
            height: 100px;
            border-radius: 12px;
            align-self: flex-end;
            margin-left: 10px;
        }

        .main span:nth-child(3) {
            height: 100px;
            border-radius: 12px;
            order: -1;
            margin-left: 10px;
        }
    </style>
</head>

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

</html>
2、效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/457900.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

电阻器的等效电路与高频无感电阻的性能

电阻器的等效电路与高频无感电阻的性能

电阻器的结构比较简单&#xff0c;但在高频情况下&#xff0c;不能简单地把电阻器看成只是一个电阻分量的理想元件。电阳器实际上是由许多电阻、电感和电容分量组成的复杂阻抗系统&#xff0c;电阻只是其中的一个主要成分。因此必须研究电阻器的直流等效电路、高频等效电路和集…
阅读更多...
面试题系列一之-css画三角形(原理解析)

面试题系列一之-css画三角形(原理解析)

用html写一个三角形的图标算是一个比较简单的,但是工作中用的还是比较多的&#xff0c;面试也可能会问&#xff0c;但了解背后的原理才能熟练使用 我们首先写一个div,设置边框 <body><div class"border"></div> </body> <style> .bo…
阅读更多...
HNU计算机系统·汇编进阶

HNU计算机系统·汇编进阶

知识回顾&#xff1a; 寻址&#xff1a; 其中&#xff0c;比例因子S&#xff0c;只能是1&#xff0c;2&#xff0c;4&#xff0c;8中的数&#xff0c;这是因为在LEA的独立电路中使用移位寄存器 上节课的补充&#xff1a; mov部分: mov value , %eax mov $value , %eax 第一条…
阅读更多...
Python数据分析-5

Python数据分析-5

1.时间序列 2.pandas重采样 重采样&#xff1a;指的是将时间序列从一个频率转化为另一个频率进行处理的过程&#xff0c;将高频率数据转化为低频率数据为降采样&#xff0c;低频率转 化为高频率为升采样。 统计出911数据中不同月份电话次数的变化情况&#xff1a…
阅读更多...
Mysql---库表操作

Mysql---库表操作

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.Mysql数据库简介 MySQL是一种关系型数据库管理系统&#xff0c;是最流行的开源数据库之一。它是由瑞典MySQL AB公司开发的&#xff0c;后来被Sun Microsystems收购&#xff0c;之后又被Oracl…
阅读更多...
vue iview 级联选择器遇到的坑

vue iview 级联选择器遇到的坑

我们PC项目用到的前端技术栈是vue+iview,最近有个需求，要做个级联选择器，并且是懒加载动态加载后端返回的数据。效果如下： 如下图所示，在我们封装的公共组件form-box.vue里有我们级联选择器： 代码如下： <!--级联选择器--><template v-else-if="item.type…
阅读更多...
传统机器学习 基于TF_IDF的文本聚类实现

传统机器学习 基于TF_IDF的文本聚类实现

简介 使用sklearn基于TF_IDF算法&#xff0c;实现把文本变成向量。再使用sklearn的kmeans聚类算法进行文本聚类。 个人观点&#xff1a;这是比较古老的技术了&#xff0c;文本转向量的效果不如如今的 text2vec 文本转向量好。 而且sklearn 不支持GPU加速&#xff0c;处理大量…
阅读更多...
Spring Boot整合STOMP实现实时通信

Spring Boot整合STOMP实现实时通信

目录 引言 代码实现 配置类WebSocketMessageBrokerConfig DTO 工具类 Controller common.html stomp-broadcast.html 运行效果 完整代码地址 引言 STOMP&#xff08;Simple Text Oriented Messaging Protocol&#xff09;作为一种简单文本导向的消息传递协议&#xf…
阅读更多...
物联网技术助力智慧城市转型升级：智能、高效、可持续

物联网技术助力智慧城市转型升级：智能、高效、可持续

目录 一、物联网技术概述及其在智慧城市中的应用 二、物联网技术助力智慧城市转型升级的路径 1、提升城市基础设施智能化水平 2、推动公共服务智能化升级 3、促进城市治理现代化 三、物联网技术助力智慧城市转型升级的成效与展望 1、成效显著 2、展望未来 四、物联网技…
阅读更多...
数据分析-Pandas多维数据平行坐标可视化

数据分析-Pandas多维数据平行坐标可视化

数据分析-Pandas多维数据平行坐标可视化 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表…
阅读更多...
【javaWeb】在webapp中手动发布一个应用

【javaWeb】在webapp中手动发布一个应用

标题 &#x1f432;一、为什么要在webapp中手动发布一个应用&#x1f389;二、手动发布步骤1.下载Tomcat2.解压并安装3.在webapps中创建文档 ✨三、总结 &#x1f432;一、为什么要在webapp中手动发布一个应用 好处解释灵活性手动发布应用程序可以根据自己的需求进行自定义配置…
阅读更多...
【大模型系列】图片生成(DDPM/VAE/StableDiffusion/ControlNet/LoRA)

【大模型系列】图片生成(DDPM/VAE/StableDiffusion/ControlNet/LoRA)

文章目录 1 DDPM(UC Berkeley, 2020)1.1 如何使用DDPM生成图片1.2 如何训练网络1.3 模型原理 2 VAE:Auto-Encoding Variational Bayes(2022&#xff0c;Kingma)2.1 如何利用VAE进行图像增广2.2 如何训练VAE网络2.3 VAE原理2.3.1 Auto-Encoder2.3.2 VAE编码器2.3.3 VAE解码器 3 …
阅读更多...
编程示例：约瑟夫环问题

编程示例：约瑟夫环问题

编程示例&#xff1a;约瑟夫环问题 &#xff11;约瑟夫环的故事 在浩瀚的计算机语言中&#xff0c;总有一些算法——虽然码量很少&#xff0c; 但却能完美又巧妙地解决那些复杂的问题。接下来&#xff0c; 我们要介绍的“约瑟夫环”问题就是一个很好的例子。 这个问题来源于犹…
阅读更多...
基于uniapp的旅游景点入园预约系统 微信小程序0220o

基于uniapp的旅游景点入园预约系统 微信小程序0220o

技术要求&#xff1a; a) 操作系统&#xff1a;Windows、Linux等&#xff1b; b) 开发工具&#xff1a;Android Studio、pycharm等&#xff1b; c) 数据库&#xff1a;Oracle、MySQL等&#xff1b; d) 开发语言&#xff1a;python&#xff1b; e) 技术框架&#xff1a;采用MVC模…
阅读更多...
GPT实战系列-如何让LangChain的Agent选择工具

GPT实战系列-如何让LangChain的Agent选择工具

GPT实战系列-如何让LangChain的Agent选择工具 LangChain GPT实战系列-LangChain如何构建基通义千问的多工具链 GPT实战系列-构建多参数的自定义LangChain工具 GPT实战系列-通过Basetool构建自定义LangChain工具方法 GPT实战系列-一种构建LangChain自定义Tool工具的简单方法…
阅读更多...
PHP中的反序列化漏洞

PHP中的反序列化漏洞

PHP中的反序列化漏洞 目录 PHP 中的序列化与反序列化 概述 序列化 基本类型的序列化 对象的序列化 反序列化 示例序列化与反序列化 反序列化漏洞 - PHP 中的魔术方法 - Typecho_v1.0 中的反序列化漏洞 POP链的构造思路 pop链案例 反序列化逃逸 字符串逃逸&#xff…
阅读更多...
Mac-自动操作 实现双击即可执行shell脚本

Mac-自动操作 实现双击即可执行shell脚本

背景 在Mac上运行shell脚本&#xff0c;总是需要开启终端窗口执行&#xff0c;比较麻烦 方案 使用Mac上自带的“自动操作”程序&#xff0c;将shell脚本打包成可运行程序(.app后缀)&#xff0c;实现双击打开即可执行shell脚本 实现细节 找到Mac上 应用程序中的 自动操作&am…
阅读更多...
HTML案例-1.标签练习

HTML案例-1.标签练习

效果 源码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head&g…
阅读更多...
三维高斯是什么

三维高斯是什么

最近3DGS的爆火&#xff0c;引发了一众对三维高斯表达场景的研究。这里的三维高斯是什么&#xff1f;本文用简答的描述和简单实验来呈现三维高斯的数学意义。本文没有公式推导&#xff0c;主打一个意会。 我们高中都学过高斯分布&#xff0c;即一个钟形曲线。它的特点是有一个…
阅读更多...
数字逻辑-时序逻辑电路二——沐雨先生

数字逻辑-时序逻辑电路二——沐雨先生

一、实验目的 &#xff08;1&#xff09;熟悉计数器的逻辑功能及特性。 &#xff08;2&#xff09;掌握计数器的应用。 &#xff08;3&#xff09;掌握时序逻辑电路的分析和设计方法。 二、实验仪器及材料 三、实验原理 1、集成4位计数器74LS161&#xff08;74LS160&#…
阅读更多...
最新文章

Copyright @ 2022~2023