flex吃干抹净

news/2024/5/19 22:46:05/

Flex 布局是什么?

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

.box{display: flex;//行内元素也可以使用flex布局//display: inline-flex;
}
  • display: flex; 使元素呈现为块级元素,占据整行空间,除非使用 width 或 height 等属性指定其大小。所有子元素将按照弹性盒子的规则进行布局。
  • display: inline-flex; 使元素呈现为一个行内元素,可以与其他元素在同一行上显示。其子元素也将按照弹性盒子的规则进行布局 。
    设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

flex属性

父元素属性

  • flex-direction
    flex-direction属性决定主轴的方向 默认值为row
    flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap
    flex-wrap决定子元素换行 默认值为nowarp
    flex-wrap: nowrap | warp | wrap-reverse
  • flex-flow
    flex-direction和flex-wrap的复合属性 ****row nowrap
    flex-flow: <flex-direction> | <flex-wrap>
  • justify-content属性定义了项目在主轴上的对齐方式
    justify-content: flex-start | flex-end | center | space-between | space-around
  • align-items属性决定了侧轴上的对齐方式
    align-items: flex-start | flex-end | center | baseline | stretch;
    align-content 多行子容器在交叉轴上的对齐方式,首先的前提是它要满足换行
    align-content :flex-start | flex-end | center | space-between | space-around | stretch
  • gap 属性决定了主轴子元素之间的间隔
    gap: <number>

子元素属性

  • order : 自定义排序,设置order可以按照由小到大进行排列
    order: <integer>
  • align-self 单独设置子容器的交叉轴排列方式
    align-self: flex-start | flex-end | center | baseline | stretch
  • flex-basis表示当子容器不伸缩的状态时,也就是没有设置 flex: 数字的弹性情况下的原始尺寸,默认为auto,item本来的大小
    flex-basis: <length> | auto
  • flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    flex-grow: <number>
  • flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  • flex-shrink: <number>
    flex: 属性是flex-growflex-shrink 和 flex-basis的复合属性
    flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
flex: 1

flex:1 = flex: 1 1 0%;
flex:1在父元素尺寸不足的时候,会优先最小化内容尺寸

flex:auto

flex:auto = flex: 1 1 auto
flex:auto在父元素尺寸不足的时候,会优先最大化内容尺寸。

flex: 0

flex:0 = flex: 0 1 0%;
flex:0 :通常表现为内容最小化宽度,不会充分的分配容器的尺寸。

flex:none

flex:none = flex:0 0 auto;
flex:none;表示元素的大小由内容决定,但是flex-grow,flex-shrink都是0,元素没有弹性,通常表现为内容最大化宽度,也许会溢出容器。

所以在日常开发中使用flex:1和 flex:auto比较多

快速练习和使用

CSS3 Flexbox 在线演示

一些布局使用

全屏布局

<div class="fullscreen">
<header></header>
<main></main>
<footer></footer>
</div>

css

.fullscreen {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
header {
height: 100px;
background-color: yellow;
}
footer {
height: 100px;
background-color: black;
}
main {
flex: 1;
background-color: blue;
}

圣杯和双飞翼布局

<div class="grail">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.grail {
display: flex;
height: 100vh;
width: 100vw;
}
.right {
width: 100px;
background-color: blue;
}
.left {
width: 100px;
background-color: red;
}
.center {
flex: 1;
background-color: yellow;
}

两列布局(一列固定,一列自适应)

<div class="two-column">
<div class="left"></div>
<div class="right"></div>
</div>

css

.two-column {
display: flex;
height: 100vh;
width: 100vw;
}
.left {
width: 100px;
background-color: blue;
}
.right {
flex: 1;
background-color: red;
}

综合案例

![[Pasted image 20240106110443.png]]

<div class="container"><div class="part1"><div class="part1-left"></div><div class="part1-right"></div></div><div class="part2"><div class="part2-top"></div><div class="part2-middle"></div><div class="part2-bottom"><div class="part2-inputBar"></div><div class="part2-inputBtn"></div></div></div><div class="part3"><div class="part3-top"></div><div class="part3-middle"><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div></div><div class="part3-bottom"></div></div></div>

css

body {font-size: small;height: 100vh;width: 100vw;margin: 0;background-color: rgb(216, 216, 216);display: flex;flex-direction: column;justify-content: center;align-items: center;box-sizing: border-box;}div {border: 1px red solid;}.container {display: flex;flex-direction: column;justify-content: space-between;align-items: center;height: 100vh;width: 1200px;background-color: white;/* margin-top: 20px; */padding: 30px 40px;box-sizing: border-box;}.part1 {height: 100px;width: 1100px;display: flex;justify-content: space-between;align-items: center;/* margin-top: 10px; */}.part2 {height: 300px;width: 1100px;display: flex;flex-direction: column;align-items: center;justify-content: space-between;gap: 20px;}.part1-left {height: 80px;width: 300px;display: flex;justify-content: center;align-items: center;gap: 10px;}.part1-right {height: 80px;width: 300px;display: flex;justify-content: space-between;align-items: center;gap: 20px;}.part2-top {margin-top: 2px;width: 800px;height: 100px;}.part2-middle {width: 400px;height: 100px;font-size: 20px;}.part2-bottom {width: 300px;height: 100px;display: flex;justify-content: center;align-items: center;gap: 20px;margin-top: 20px;}.part3 {height: 300px;width: 1100px;display: flex;flex-direction: column;align-items: center;justify-content: space-between;}.part3-top {margin-top: 2px;width: 600px;height: 30px;}.part3-middle {width: 1000px;height: 200px;display: flex;justify-content: space-between;align-items: center;}.part3-bottom {margin-bottom: 2px;width: 300px;height: 50px;}.card {height: 180px;width: 180px;}

文章到这里就结束了,文章更多作为自我学习,也希望对你有所帮助,有错欢迎指出。


http://www.ppmy.cn/news/1423386.html

相关文章

蓝桥杯---数组分割

https://www.dotcpp.com/oj/problem3171.html 测试用例分析&#xff1a; 2 2 6 6 2 1 6 这代表有两个测试用例。 第一测试用例: 数组: [6, 6]长度: 2 分析 数组中的所有元素都是偶数&#xff0c;因此任意组合的和都将是偶数。可能的组合及其和&#xff1a; 空集: 和 0 …

数据结构书后习题

p17 1&#xff0c; 个人解答&#xff1a; int DeleteMinElem(SqList &L,int &min) {int j 0;if (L.length 0){printf("error!");return 0;}int min L.data[0];for (int i 1; i < L.length; i){if (L.data[i] < min){min L.data[i];j i;}}L.dat…

图像分割:Pytorch实现UNet++进行医学细胞分割

图像分割&#xff1a;Pytorch实现UNet进行医学细胞分割 前言相关介绍项目结构具体步骤准备数据集读取数据集设置并解析相关参数定义网络模型定义损失函数定义优化器训练验证 参考 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多精彩内容&#x…

MySQL高负载排查方法最佳实践(15/16)

高负载排查方法 CPU占用率过高问题排查 使用mpstat查看cpu使用情况。 # mpstat 是一款 CPU 性能指标实时展示工具 # 能展示每个 CPU 核的资源视情况&#xff0c;同时还能将资源使用情况进行汇总展示 # 如果CPU0 的 %idle 已经为 0 &#xff0c;说明此核已经非常繁忙# 打印所…

网络基础-基于TCP协议的Socket通讯

一、Socket通讯基于TCP协议流程图 UDP 的 Socket 编程相对简单些不在介绍。 二、 服务端程序启动 服务端程序要先跑起来&#xff0c;然后等待客户端的连接和数据。 服务端程序首先调用 socket() 函数&#xff0c;创建网络协议为 IPv4&#xff0c;以及传输协议为 TCP 的…

将Ubuntu18.04默认的python3.6升级到python3.8

1、查看现有的 python3 版本 python3 --version 2、安装 python3.8 sudo apt install python3.8 3、将 python3.6 和 3.8 添加到 update-alternatives sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.6 1 sudo update-alternatives --insta…

AIDE:自动驾驶目标检测的自动数据引擎

AIDE&#xff1a;自动驾驶目标检测的自动数据引擎 摘要IntroductionRelated WorksMethodData FeederModel Updater4 Experiments 摘要 自动驾驶车辆&#xff08;AV&#xff09;系统依赖于健壮的感知模型作为安全保证的基石。然而&#xff0c;道路上遇到的物体表现出长尾分布&a…

2024-4-18 群讨论:关于异步HttpClient如何测试验证

以下来自本人拉的一个关于 Java 技术的讨论群。关注公众号&#xff1a;hashcon&#xff0c;私信进群拉你 群友问题&#xff1a;群友想尽量快的将请求发到三方接口&#xff0c;不考虑三方接口的压力。如何开发并验证&#xff1f; 思路&#xff1a; 肯定要使用 WebClient 这种…

未来计算机的发展趋势是什么?

未来计算机的发展趋势是多方面的,涵盖了硬件、软件、体系结构以及计算范式等多个层面。以下是一些预期的趋势: 1. 量子计算: 随着量子理论的不断成熟和技术的进步,量子计算机将可能解决传统计算机难以处理的问题,比如药物发现、材料科学、复杂系统模拟等领域。量子计算的…

gpt-6有望成为通用工具

OpenAI CEO山姆奥特曼&#xff08;Sam Altman&#xff09;在最新的博客访谈中&#xff0c;提到gpt-6有望成为通用工具。 奥特曼还认为&#xff0c;目前的模型不够聪明&#xff0c;“使用GPT-2进行科学研究曾被认为是不切实际的想法。而如今&#xff0c;虽然人们使用GPT-4进行科…

程序员购车指南

哈喽大家好&#xff0c;我是咸鱼。 爱车可以说是大部分男人的天性&#xff0c;而我对汽车的热情却远不及对手表的钟爱&#xff08;痴迷劳力士&#xff09;。以至于我的朋友掏出车钥匙指着上面的苹果树标志跟我介绍奔驰 AMG 系列的强劲性能和马力时&#xff0c;我只能尽量假装自…

2024年第十七届 认证杯 网络挑战赛 (C题)| 云中的海盐 | 辐射传输方程 Stefan-Boltzmann分析 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看认证杯 网络挑战赛 (C题&#xff09;&#xff01…

总结SQL相对常用的几个字符函数

目录 字符的截取 substr() trim()、ltrim()、rtrim() 字符串的拼接 ||、 字符的大小写转换 upper(column_name):大写 lower(column_name):小写 字符替换 replace() 搜索字符 instr(column_name, substring_to_find,start,n_appearence) charindex(substring_to_fi…

【软考】UML中的图之用例图

目录 1. 说明2. 建模2.1 说明2.2 语境建模2.3 需求建模 3. 图示4. 组成部分 1. 说明 1.用例图&#xff08;Use Case Diagram&#xff09;。2.展现了一组用例、参与者&#xff08;Actor&#xff09;以及它们之间的关系。3.用例图通常包括以下的内容&#xff1a;用例、参与者、用…

uniapp开发App,手机顶部状态栏问题

问题&#xff1a;在使用uniapp开发手机App时&#xff0c;因为HBuildX创建的应用默认是沉浸式样式&#xff0c;如果去除自带的导航栏之后&#xff0c;页面会直通手机顶部状态栏&#xff0c;解决办法有一下几个 方法1&#xff1a;可以使用uniapp官方文档提供的解决方案 https://u…

java混淆的公司有哪些

一些提供 Java 混淆服务的公司包括&#xff1a; PreEmptive Solutions&#xff1a;PreEmptive Solutions 提供了一系列用于保护 Java 和 .NET 应用程序的工具&#xff0c;包括混淆、代码压缩、加密和漏洞检测等功能。 DexGuard&#xff1a;DexGuard 是 Guardsquare 公司推出的…

transformer架构详细详解

一、transformer的贡献 transformer架构的贡献&#xff1a;该架构只使用自注意力机制&#xff0c;没有使用RNN或卷积网络。且可以实现并行计算&#xff0c;加快模型训练速度。 &#xff08;将所有的循环层全部换成&#xff1a;multi-headed self-attention&#xff09; 二、t…

深度学习在三维点云处理与三维重建中的应用探索

目录 点云数据处理 数据清洗 数据降噪和简化 数据配准 特征提取 数据增强 数据组织 性能考量 PointNet PointNet 算法问题 改进方法 三维重建 重建算法 架构模块 流程步骤 标记说明 优点和挑战 点云数据处理 数据清洗 去噪&#xff1a;点云数据通常包含噪声…

CentOS 7安装Zookeeper

说明&#xff1a;本文介绍如何在CentOS 7操作系统下使用Zookeeper 下载安装 首先&#xff0c;去官网下载所需要安装的版本&#xff0c;我这里下载3.4.9版本&#xff1b; 上传到云服务器上&#xff0c;解压 tar -xvf zookeeper-3.4.9.tar.gz修改配置 进入Zookeeper目录下的co…

【华为OD机试】高效货运【C卷|200分】

【华为OD机试】-真题 !!点这里&#xff01;&#xff01; 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 老李是货运公司承运人&#xff0c;老李的货车额定载货重量为 wt。 现有两种货物&#xff1a; 货物 A 单件重量为 wa&#xff0c;单件运费利润为 pa 货物 B 单件重量为…