CSS 弹性盒子模型

CSS3弹性盒内容


弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置display属性的值为flex将其定义为弹性容器弹性容器内包含了一个或多个弹性子元素

温馨提示:弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

它主要是在一个大的容器当中里面子元素的一个设置。一个大的盒子里面里面的子元素如何摆放由我们的弹性盒子说的算。

之前的盒子模型是一个元素,内边距外边距,边框来调整在页面所显示的位置。而弹性盒子是在大容器里面,里面有很多的小盒子,这些小盒子是如何摆放的。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><style>.container{width: 500px;height: 500px;background-color: blueviolet;}.box1{width: 100px;height: 100px;background-color: blue;}.box2{width: 100px;height: 100px;background-color: yellow;}.box3{width: 100px;height: 100px;background-color: greenyellow;}</style>
</head><body><div class="container"><div class="box1">box1</div><div class="box2">flex item 2</div><div class="box3">box3</div>
</div></body></html>

盒子是自上而下进行摆放的。默认div是块级元素,div和div之间是垂直摆放的。现在可以为盒子的布局设置一个弹性盒子模型,给外层容器的div加上弹性盒子设置,那么就可以管理里面三个盒子。

这样需要给容器设置display属性值为flex。

注意:默认弹性盒子里面内容是横向摆放

       .container{display: flex;width: 500px;height: 500px;background-color: blueviolet;}

 

 

 

 父级元素上的属性


这里只需要记住一个属性,就是垂直的属性。

justify-content:这个父级属性是应用在垂直上面,垂直方向上面的摆放

       .container{display: flex;justify-content: center;width: 500px;height: 500px;background-color: blueviolet;}

 align-items:父亲属性是水平方向,让容器内部的元素居左还是居右边还是中

       .container{display: flex;justify-content: center;align-items: center;width: 500px;height: 500px;background-color: blueviolet;}

上面就实现了将小盒子放在大盒子里面居中,垂直和水平方向都居中。设置一个子盒子在一个父亲盒子里面居中非常简单。只需要设置justify-content: center  align-items: center这两个属性即可。

 

子元素上的属性


有多个盒子,可以设置盒子所占空间的权重。因为大盒子可能会发生变化,所以小盒子使用权重的方式来设置。一旦设置的flex属性,小盒子的宽高就不在生效了。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><style>.container{display: flex;justify-content: center;align-items: center;width: 500px;height: 500px;background-color: blueviolet;}.box1{text-align: center;background-color: blue;flex: 2;}.box2{text-align: center;background-color: yellow;flex: 2;}.box3{text-align: center;background-color: greenyellow;flex: 1;}</style>
</head><body><div class="container"><div class="box1">box1</div><div class="box2">flex item 2</div><div class="box3">box3</div>
</div></body></html>

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><style>.container{display: flex;justify-content: center;align-items: center;width: 500px;height: 500px;background-color: blueviolet;}.box1{text-align: center;background-color: blue;flex: 2;}.box2{text-align: center;background-color: yellow;flex: 2;}.box3{text-align: center;background-color: greenyellow;flex: 1;}</style>
</head><body><div class="container"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div>
</div></body></html>

 

 

 

盒子嵌套  其实原理都是一样


<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><style>.container{display: flex;width: 100vw;height: 100vh;background-color: blueviolet;}.box1{text-align: center;background-color: blue;flex: 1;}.box2{text-align: center;background-color: yellow;flex: 1;}.box3{text-align: center;background-color: greenyellow;flex: 4;}.box4{text-align: center;background-color: cadetblue;flex: 1;}.box{background-color: blanchedalmond;flex: 4;}.container1{display: flex;flex-direction: column;flex: 4;}</style>
</head><body><div class="container"><div class="box1">box1</div><div class="container1"><div class="box2">box2</div><div class="box3">box3</div><div class="box4">box4</div></div>
</div></body></html>

 

 

 

总结


在父亲元素属性比较多,开启弹性盒子模型通过display:(1)flex属性来开启(2)子盒子方向可以通过flex-direction进行调整(3)之后就是子盒子上下左右位置(4)最后就是子盒子在父盒子当中的平均分配。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记事小本本

记事小本本 实现效果 相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</titl…

【Linux进阶之路】HTTP协议

文章目录 一、基本概念1.HTTP2.域名3.默认端口号4.URL 二、请求与响应1.抓包工具2.基本框架3.简易实现3.1 HttpServer3.2 HttpRequest3.2.1 version13.2.2 version23.2.3 version3 总结尾序 一、基本概念 常见的应用层协议&#xff1a; HTTPS (HyperText Transfer Protocol Sec…

DVWA靶场-暴力破解

DVWA是一个适合新手锻炼的靶机&#xff0c;是由PHP/MySQL组成的 Web应用程序&#xff0c;帮助大家了解web应用的攻击手段 DVWA大致能分成以下几个模块&#xff0c;包含了OWASP Top 10大主流漏洞环境。 Brute Force——暴力破解 Command Injection——命令注入 CSRF——跨站请…

JVM内存结构介绍

1. 什么是JVM 我们都知道在 Windows 系统上一个软件包装包是 exe 后缀的&#xff0c;而这个软件包在苹果的 Mac OSX 系统上是无法安装的。类似地&#xff0c;Mac OSX 系统上软件安装包则是 dmg 后缀&#xff0c;同样无法在 Windows 系统上安装。 Java 代码为什么可以在 Windows…

2024年了,SEO优化是不是已经穷途末路了呢?(川圣SEO)蜘蛛池

baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; 2024年了&#xff0c;SEO优化是不是已经穷途末路了呢&#xff1f;#蜘蛛池SEO SEO优化并没有穷途末路。虽然随…

element---tree树形结构(返回的数据与官方的不一样)

项目中要用到属性结构数据&#xff0c;后端返回的数据不是官方默认的数据结构&#xff1a; <el-tree:data"treeData":filter-node-method"filterNode":props"defaultProps"node-click"handleNodeClick"></el-tree>这是文档…

算法练习:二分查找

目录 1. 朴素二分查找2. 在排序数组中查找元素的第一个和最后一个位置3. 搜索插入位置4. x的平方根5. 山脉数组的峰值索引6. 寻找峰值7. 寻找旋转排序数组中的最小值8. 点名 1. 朴素二分查找 题目信息&#xff1a; 题目链接&#xff1a; 二分查找二分查找的使用前提为数据具有&…

5.Java并发编程—JUC线程池架构

JUC线程池架构 在Java开发中&#xff0c;线程的创建和销毁对系统性能有一定的开销&#xff0c;需要JVM和操作系统的配合完成大量的工作。 JVM对线程的创建和销毁&#xff1a; 线程的创建需要JVM分配内存、初始化线程栈和线程上下文等资源&#xff0c;这些操作会带来一定的时间和…

大型网站要怎样去建立SEO体系呢?(川圣SEO)蜘蛛池

baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; 大型网站要怎样去建立SEO体系呢&#xff1f;#蜘蛛池SEO川圣 大公司建立SEO体系还是比较难的&#xff0c;因为…

【论文阅读】Natural Adversarial Examples 自然对抗的例子

文章目录 一、文章概览&#xff08;一&#xff09;摘要&#xff08;二&#xff09;导论&#xff08;三&#xff09;相关工作 二、IMAGENET-A 和 IMAGENET-O&#xff08;一&#xff09;数据集构造方式&#xff08;二&#xff09;数据收集过程 三、模型的故障模式四、实验&#x…

[MYSQL数据库]--表内操作(CURD)

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、表的 Cre…

介绍 Docker 的基本概念和优势,以及在应用程序开发中的实际应用。

Docker 是一种开源的容器化平台&#xff0c;可以将应用程序及其所有依赖项打包成一个独立的容器&#xff0c;从而实现快速部署、运行和扩展应用程序的能力。 Docker官网地址&#xff1a;https://www.docker.com/ 1.Docker 基本概念 1.1 镜像&#xff08;Image&#xff09; 镜…

Rust 安装与版本更新

Rust 简介 Rust &#xff0c;一门赋予每个人构建可靠且高效软件能力的语言&#xff0c;主打内存安全。 2024年2月&#xff0c;在一份 19 页的报告《回归基础构件&#xff1a;通往安全软件之路》中&#xff0c;白宫国家网络主任办公室&#xff08;ONCD&#xff09;呼吁开发者使…

git svn混用

背景 项目代码管理初始使用的svn, 由于svn代码操作&#xff0c;无法在本地暂存&#xff0c;有诸多不便&#xff0c;另外本人习惯使用git. 所以决定迁移至git管理 迁移要求&#xff1a; 保留历史提交记录 迁移流程 代码检出 git svn svn_project_url git代码提交 修改本…

读取txt文件并统计每行最长的单词以及长度

读取txt文件并统计每行最长的单词以及长度 题目 在 D:\\documant.txt 文本中,文件中有若干行英文文本,每行英文文本中有若干个单词&#xff0c;每个单词不会跨行出现每行至多包含100个字符,要求编写一个程序,处理文件,分析各行中的单词,找到每行中的最长单词&#xff0c;分别…

selenium元素定位问题

一、按钮点击 具体网页信息如下&#xff1a; 定位的时候driver.find_element(By.CLASS_NAME, 方法搞不定。 定位方法&#xff1a; 方法一&#xff1a;通过文本定位 driver.find_element(By.XPATH, "//*[text()高分一号]").click() time.sleep(3) 如果是部分文字…

day08_Mybatis

文章目录 前言一、快速入门1.1 入门程序分析1.2 入门程序实现1.2.1 准备工作1.2.1.1 创建springboot工程1.2.1.2 数据准备 1.2.2 配置Mybatis1.2.3 编写SQL语句1.2.4 单元测试1.3 解决SQL警告与提示 二、JDBC介绍2.1 介绍2.2 代码2.3 问题分析2.4 技术对比 三、数据库连接池3.1…

LeetCode[题解] 1261. 在受污染的二叉树中查找元素

首先我们看原题 给出一个满足下述规则的二叉树&#xff1a; root.val 0如果 treeNode.val x 且 treeNode.left ! null&#xff0c;那么 treeNode.left.val 2 * x 1如果 treeNode.val x 且 treeNode.right ! null&#xff0c;那么 treeNode.right.val 2 * x 2 现在这个…

基于ssm的志愿者招募系统的设计与实现(程序+文档+数据库)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

FPGA 按键控制串口发送

按键消抖 消抖时间一般为10ms&#xff0c;我使用的板子是ACX720&#xff0c;晶振为50MHZ&#xff0c;20ns为一周期。 状态机 模块设计 设计文件 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2023/01/11 12:18:36 // Design Name: // Module Name…