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

CSS知识点汇总(八)--Flexbox

1. flexbox(弹性盒布局模型)是什么,适用什么场景?

1. flexbox(弹性盒布局模型)是什么

Flexible Box 简称 flex,意为”弹性布局”,可以简便、完整、响应式地实现各种页面布局。采用Flex布局的元素,称为flex容器container;它的所有子元素自动成为容器成员,称为flex项目item。
在这里插入图片描述
容器中默认存在两条轴,主轴和交叉轴,呈90度关系。项目默认沿主轴排列,通过flex-direction来决定主轴的方向,每根轴都有起点和终点
3. 属性
可以划分为容器属性和容器成员属性

容器属性有:

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

    flex-direction
    决定主轴的方向(即项目的排列方向)
    .container { flex-direction: row | row-reverse | column | column-reverse; }
    属性对应如下:

    • row(默认值):主轴为水平方向,起点在左端
    • row-reverse:主轴为水平方向,起点在右端
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿
      在这里插入图片描述

    flex-wrap
    弹性元素永远沿主轴排列,那么如果主轴排不下,通过flex-wrap决定容器内项目是否可换行
    .container { flex-wrap: nowrap | wrap | wrap-reverse; }
    属性对应如下:

    • nowrap(默认值):不换行
    • wrap:换行,第一行在上方
    • wrap-reverse:换行,第一行在下方

    默认情况是不换行,但这里也不会任由元素直接溢出容器,会涉及到元素的弹性伸缩

    flex-flow
    是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
    .box { flex-flow: <flex-direction> || <flex-wrap>; }

    justify-content
    定义了项目在主轴上的对齐方式
    .box { justify-content: flex-start | flex-end | center | space-between | space-around; }
    属性对应如下:

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center:居中
    • space-between:两端对齐,项目之间的间隔都相等
    • space-around:两个项目两侧间隔相等
      效果图如下:
      在这里插入图片描述

    align-items
    定义项目在交叉轴上如何对齐
    .box { align-items: flex-start | flex-end | center | baseline | stretch; }

    属性对应如下:

    • flex-start:交叉轴的起点对齐
    • flex-end:交叉轴的终点对齐
    • center:交叉轴的中点对齐
    • baseline: 项目的第一行文字的基线对齐
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

    align-content
    定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
    .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
    属性对应如吓:

    • flex-start:与交叉轴的起点对齐
    • flex-end:与交叉轴的终点对齐
    • center:与交叉轴的中点对齐
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大1倍
    • stretch(默认值):轴线占满整个交叉轴
      在这里插入图片描述

容器成员属性有

  • flex-basis
  • flex
  • align-self
  • order
  • flex-grow
  • flex-shrink

flex-basis
设置的是元素在主轴上的初始尺寸,所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

浏览器根据这个属性,计算主轴是否有多余空间,默认值为auto,即项目的本来大小,如设置了width则元素尺寸由width/height决定(主轴方向),没有设置则由内容决定

.item { flex-basis: <length> | auto; /* default auto */ }
当设置为0的是,会根据内容撑开
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间

flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,也是比较难懂的一个复合属性
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

属性有:

  • flex: 1 = flex: 1 1 0%
  • flex: 2 = flex: 2 1 0%
  • flex: auto = flex: 1 1 auto
  • flex: none = flex: 0 0 auto,常用于固定尺寸不伸缩

flex:1 和 flex:auto 的区别:

  • 当设置为0时(绝对弹性元素),相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸
  • 当设置为auto时(相对弹性元素),此时则需要在伸缩时将元素尺寸纳入考虑

注意:建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值

align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

在这里插入图片描述

2. 应用场景

可以通过flex简单粗暴的实现元素水平垂直方向的居中,以及在两栏三栏自适应布局中通过flex完成。
包括现在在移动端、小程序这边的开发,都建议使用flex进行布局

相关文章:

CSS知识点汇总(八)--Flexbox

1. flexbox&#xff08;弹性盒布局模型&#xff09;是什么&#xff0c;适用什么场景&#xff1f; 1. flexbox&#xff08;弹性盒布局模型&#xff09;是什么 Flexible Box 简称 flex&#xff0c;意为”弹性布局”&#xff0c;可以简便、完整、响应式地实现各种页面布局。采用…...

ASCII、Unicode、UTF-8、GBK

入门小菜鸟&#xff0c;希望像做笔记记录自己学的东西&#xff0c;也希望能帮助到同样入门的人&#xff0c;更希望大佬们帮忙纠错啦~侵权立删。 目录 一、定义 1、ASCII 2、Unicode 3、UTF-8 4、GB2312 5、GBK 6、\u和\x 二、相互转化 1、str 与 ASCII 2、str与utf-…...

【安全】使用docker安装Nessus

目录 一、准备docker环境服务器&#xff08;略&#xff09; 二、安装 2.1 搜索镜像 2.2 拉取镜像 2.3 启动镜像 三、离线更新插件 3.1 获取challenge 3.2 官方注册获取激活码 3.3 使用challenge码和激活码获取插件下载地址 3.4 下载的插件以及许可协议复制到容器内 四…...

【Hadoop综合实践】手机卖场大数据综合项目分析

&#x1f680; 本文章实现了基于MapReduce的手机浏览日志分析 &#x1f680; 文章简介&#xff1a;主要包含了数据生成部分&#xff0c;数据处理部分&#xff0c;数据存储部分与数据可视化部分 &#x1f680; 【本文仅供参考&#xff01;&#xff01;非唯一答案】其中需求实现的…...

服务器技术(三)--Nginx

Nginx介绍 Nginx是什么、适用场景 Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力确实在同类型的网页服务器中表现较好。 Nginx专为性能优化而开发&#xff0c;性能是其最重要的考量&#xf…...

OpenCV——总结《车牌识别》之《常用的函数介绍》

1. cv2.getStructuringElement(cv2.MORPH_RECT, (10, 10))element cv2.getStructuringElement(shape, ksize[, anchor])用于创建形态学操作的结构元素&#xff08;structuring element&#xff09;。 参数解释&#xff1a; shape&#xff1a;结构元素的形状&#xff0c;可以…...

chatgpt赋能python:如何利用Python进行自动化办公

如何利用Python进行自动化办公 在现代办公环境中&#xff0c;自动化成为了一种趋势。利用计算机程序自动处理重复性劳动&#xff0c;可以提高生产效率和工作质量&#xff0c;同时也能够让工作更加轻松。Python作为一种常用的编程语言&#xff0c;在自动化办公中发挥了重要作用…...

linux-2.6.22.6内核网卡驱动框架分析

网络协议分为很多层&#xff0c;而驱动这层对应于实际的物理网卡部分&#xff0c;这也是最底层的部分&#xff0c;以cs89x0.c这个驱动程序为例来分析下网卡驱动程序框架。 正常开发一个驱动程序时&#xff0c;一般都遵循以下几个步骤&#xff1a; 1.分配某个结构体 2.设置该结…...

机器学习7:特征工程

在传统的软件工程中&#xff0c;核心是代码&#xff0c;然而&#xff0c;在机器学习项目中&#xff0c;重点则是特征——也就是说&#xff0c;开发人员优化模型的方法之一是增加和改进其输入特征。很多时候&#xff0c;优化特征比优化模型带来的增益要大得多。 笔者曾经参与过一…...

coverage代码覆盖率测试介绍

coverage代码覆盖率测试介绍 背景知识补充 1、什么是覆盖率 测试过程中提到的覆盖率&#xff0c;指的是已测试的内容&#xff0c;占待测内容的百分比&#xff0c;在一定程度上反应测试的完整程度。 覆盖率有可以根据要衡量的对象细分很多种&#xff0c;比如接口覆盖率、分支…...

使用 Debian、Docker 和 Nginx 部署 Web 应用

前言 本文将介绍基于 Debian 的系统上使用 Docker 和 Nginx 进行 Web 应用部署的过程。着重介绍了 Debian、Docker 和 Nginx 的安装和配置。 第 1 步&#xff1a;更新和升级 Debian 系统 通过 SSH 连接到服务器。更新软件包列表&#xff1a;sudo apt update升级已安装的软件…...

Redis原理 - 内存策略

原文首更地址&#xff0c;阅读效果更佳&#xff01; Redis原理 - 内存策略 | CoderMast编程桅杆https://www.codermast.com/database/redis/redis-memery-strategy.html Redis 本身是一个典型的 key-value 内存存储数据库&#xff0c;因此所有的 key、value 都保存在之前学习…...

【计算机网络】IP 地址处理函数

目录 1.struct sockaddr_in的结构 2.一般我们写的结构 3.常见的“点分十进制” 到 ” uint32_t 的转化接口 3.1. inet_aton 和 inet_ntoa &#xff08;ipv4&#xff09; 3.2. inet_pton 和 inet_ntop (ipv4 和 ipv6&#xff09; 3.3. inet_addr 和 inet_network 3…...

9i物联网浏览器(cef_114.2.110114.2.100支持H264视频)WinForm-CefSharp114(5735)视频版本体验

更新:2023.6.25 版本:Cef_114.2.110和114.2.100+chromium-114.0.5735.134的32位和64位 说明:支持图片,mp3,mp4(H264)多媒体 测试环境:windows server 2019 测试网址:www.html5test.com 1.包下载地址 1.1 https://www.nuget.org/packages/CefSharp.Common/ 1.2 https…...

如何在本地运行一个已关服但具有客户端的游戏

虽然游戏服务器关闭后&#xff0c;我们通常无法再进行在线游戏&#xff0c;但对于一些已经关服但仍保留客户端的游戏来说&#xff0c;我们仍然可以尝试在本地进行游玩。本文将介绍如何在本地运行一个已关服但具有客户端的游戏的方法。 一、获取游戏客户端 要在本地运行一个已关…...

C语言编程—预处理器

预处理器不是编译器的组成部分&#xff0c;但是它是编译过程中一个单独的步骤。简言之&#xff0c;C 预处理器只不过是一个文本替换工具而已&#xff0c;它们会指示编译器在实际编译之前完成所需的预处理。我们将把 C 预处理器&#xff08;C Preprocessor&#xff09;简写为 CP…...

使用 Maya Mari 设计 3D 波斯风格道具(p1)

今天瑞云渲染小编给大家带来了Simin Farrokh Ahmadi 分享的Persian Afternoon 项目过程&#xff0c;解释了 Maya 和 Mari 中的建模、纹理和照明过程。 介绍 我的名字是西敏-法罗赫-艾哈迈迪&#xff0c;人们都叫我辛巴 在我十几岁的时候&#xff0c;我就意识到我喜欢艺术和创造…...

Redis分布式问题

Redis实现分布式锁 Redis为单进程单线程模式&#xff0c;采用队列模式将并发访问变成串行访问&#xff0c;且多客户端对Redis的连接并不存在竞争关系Redis中可以使用SETNX命令实现分布式锁。当且仅当 key 不存在&#xff0c;将 key 的值设为 value。 若给定的 key 已经存在&…...

synchronized原理

目录 一、基本特点 二、加锁过程 2.1、偏向锁 2.2、轻量级锁 2.3、重量级锁 三、其它的优化操作 3.1、锁消除 3.2、锁粗化 一、基本特点 synchronized有以下特性: 开始是乐观锁&#xff0c;如果锁冲突频繁&#xff0c;就转换为悲观锁。开始是轻量级锁&#xff0c…...

10G光模块能兼容千兆光口吗

当涉及到光网络设备和光模块的兼容性时&#xff0c;确保正确的匹配是至关重要的。本期文章内容&#xff0c;我们将探讨10G光模块与千兆光口之间的兼容性。 一、10G光模块和千兆光口的基本概念 首先&#xff0c;我们需要了解10G光模块和千兆光口的基本概念。10G光模块是一种用…...

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

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

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...