当前位置: 首页 > news >正文

flex吃干抹净

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;}

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

相关文章:

flex吃干抹净

Flex 布局是什么&#xff1f; Flex 是 Flexible Box 的缩写&#xff0c;意为"弹性布局"&#xff0c;用来为盒状模型提供最大的灵活性。 .box{display: flex;//行内元素也可以使用flex布局//display: inline-flex; }display: flex; 使元素呈现为块级元素&#xff0c;…...

【单片机毕业设计8-基于stm32c8t6的RFID校园门禁系统】

【单片机毕业设计8-基于stm32c8t6的RFID校园门禁系统】 前言一、功能介绍二、硬件部分三、软件部分总结 前言 &#x1f525;这里是小殷学长&#xff0c;单片机毕业设计篇8基于stm32的RFID校园门禁系统 &#x1f9ff;创作不易&#xff0c;拒绝白嫖可私 一、功能介绍 -----------…...

uni-app web端使用getUserMedia,摄像头拍照

<template><view><video id"video"></video></view> </template> 摄像头显示在video标签上 var opts {audio: false,video: true }navigator.mediaDevices.getUserMedia(opts).then((stream)> {video document.querySelec…...

2024-简单点-观察者模式

先看代码&#xff1a; # 导入未来模块以支持类型注解 from __future__ import annotations# 导入抽象基类模块和随机数生成器 from abc import ABC, abstractmethod from random import randrange# 导入列表类型注解 from typing import List# 定义观察者模式中的主体接口&…...

STM32—DMA直接存储器访问详解

DMA——直接存储器访问 DMA&#xff1a;Data Memory Access, 直接存储器访问。 DMA和我们之前学过的串口、GPIO都是类似的&#xff0c;都是STM32中的一个外设。串口是用来发送通信数据的&#xff0c;而DMA则是用来把数据从一个地方搬到另一个地方&#xff0c;而且不占用CPU。…...

【JavaEE初阶系列】——网络编程 TCP客户端/服务器 程序实现

目录 &#x1f6a9;TCP流套接字编程 &#x1f36d;ServerSocket API &#x1f36d;Socket API &#x1f36d;TCP服务器 &#x1f36d;TCP客户端 &#x1f6a9;TCP流套接字编程 俩个关键的类 ServerSocket (给服务器使用的类&#xff0c;使用这个类来绑定端口号&#xff0…...

CMake构建OpenCv并导入QT项目过程中出现的问题汇总

前言 再此之前请确保你的环境变量是否配置&#xff0c;这是总共需要配置的环境变量 E:\cmake\bin E:\OpenCv\opencv\build\x64\vc15\bin F:\Qt\Tools\mingw730_64\bin F:\Qt\5.12.4\mingw73_64\bin 问题一&#xff1a; CMake Error: CMake was unable to find a build program…...

AcWing 796. 子矩阵的和——算法基础课题解

AcWing 796. 子矩阵的和 题目描述 输入一个 n 行 m 列的整数矩阵&#xff0c;再输入 q 个询问&#xff0c;每个询问包含四个整数 x1,y1,x2,y2&#xff0c;表示一个子矩阵的左上角坐标和右下角坐标。 对于每个询问输出子矩阵中所有数的和。 输入格式 第一行包含三个整数 n&…...

macos 查看 远程服务器是否开放某个端口

想要使用mac查看远程服务器某个端口是否开发&#xff0c;可通过 nc 命令&#xff0c;如下&#xff1a; nc -zv <服务器IP> <端口号>如果该端口开发&#xff0c;结果为&#xff1a;succeeded! Connection to <服务器IP> port <端口号> [类型] succeed…...

GraphQL注入

GraphQL概述 GraphQL是一种查询语言&#xff0c;用于API设计和数据交互&#xff0c;不仅仅用于查询数据库。GraphQL 允许客户端在一个请求中明确地指定需要的数据&#xff0c;并返回预期的结果&#xff1b;并且将数据查询和数据修改分离开&#xff0c;大大增加灵活性。GraphQL…...

以太坊源码阅读01

正所谓区块链&#xff0c;怎能不熟悉区块的数据结构呢&#xff1f;区块的结构体被保存在core/types/block.go文件中&#xff0c;下面是我截取出来的&#xff1a; type Block struct {header *Headeruncles []*Headertransactions Transactionswithdrawals Withdr…...

Spark-Scala语言实战(15)

在之前的文章中&#xff0c;我们学习了如何在spark中使用键值对中的学习键值对方法中的lookup&#xff0c;cogroup两种方法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#…...

【SpringBoot XSS存储漏洞 拦截器】Java纯后端对于前台输入值的拦截校验实现 一个类加一个注解结束

先看效果&#xff1a; 1.js注入拦截&#xff1a; 2.sql注入拦截 生效只需要两步&#xff1a; 1.创建Filter类&#xff0c;粘贴如下代码&#xff1a; package cn.你的包命.filter; import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.IO…...

【微信小程序】canvas开发笔记

【微信小程序】canvasToTempFilePath:fail fail canvas is empty 看说明书 最好是先看一下官方文档点此前往 如果是canvas 2d 写canvas: this.canvas,&#xff0c;如果是旧版写canvasId: ***, 解决问题 修改对应的代码&#xff0c;如下所示&#xff0c;然后再试试运行&#x…...

TripoSR: Fast 3D Object Reconstruction from a Single Image 论文阅读

1 Abstract TripoSR的核心是一个基于变换器的架构&#xff0c;专为单图像3D重建设计。它接受单张RGB图像作为输入&#xff0c;并输出图像中物体的3D表示。TripoSR的核心包括&#xff1a;图像编码器、图像到三平面解码器和基于三平面的神经辐射场&#xff08;NeRF&#xff09;。…...

u盘为什么一插上电脑就蓝屏,u盘一插电脑就蓝屏

u盘之前还好好的&#xff0c;可以传输文件&#xff0c;使用正常&#xff0c;但是最近使用时却出现问题了。只要将u盘一插入电脑&#xff0c;电脑就显示蓝屏。u盘为什么一插上电脑就蓝屏呢?一般&#xff0c;导致的原因有以下几种。一&#xff0c;主板的SATA或IDE控制器驱动损坏…...

【Redis】redis面试相关积累

Redis到底是多线程还是单线程&#xff1f; Redis 在设计上是单线程的&#xff0c;这意味着 Redis 服务器在任何给定时刻只能执行一个命令。然而&#xff0c;这并不意味着 Redis 无法利用多核 CPU&#xff0c;因为 Redis 使用了一些技术来提高性能和并发性&#xff0c;例如非阻…...

【Linux】进程的状态(运行、阻塞、挂起)详解,揭开孤儿进程和僵尸进程的面纱,一篇文章万字讲透!!!!进程的学习②

目录 1.进程排队 时间片 时间片的分配 结构体内存对齐 偏移量补充 对齐规则 为什么会有对齐 2.操作系统学科层面对进程状态的理解 2.1进程的状态理解 ①我们说所谓的状态就是一个整型变量&#xff0c;是task_struct中的一个整型变量 ②.状态决定了接下来的动作 2.2运行状态 2.…...

前端js基础知识(八股文大全)

一、js的数据类型 值类型(基本类型)&#xff1a;数字(Number)、字符串&#xff08;String&#xff09;、布尔(Boolean)、对空&#xff08;Null&#xff09;、未定义&#xff08;Undefined&#xff09;、Symbol,大数值类型(BigInt) 引用数据类型&#xff1a;对象(Object)、数组…...

316_C++_xml文件解析成map,可以放到表格上 + xml、xlsx文件互相解析

xml文件例如&#xff1a; <?xml version"1.0" encoding"UTF-8" standalone"yes"?> <TrTable> <tr id"0" label"TR_PB_CH" text"CH%2"/> <tr id"4" label"TR_PB_CHN"…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...