css3----flex布局-容器属性

最新推荐文章于 2022-12-14 18:30:00 发布
置顶 最新推荐文章于 2022-12-14 18:30:00 发布
阅读量90 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzmbkh/article/details/100672508
版权

盒模型分类

盒模型分类：IE盒模型，和标准盒模型，本质区别：宽高计算方式
在这里插入图片描述在这里插入图片描述

水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）在这里插入图片描述

标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

在这里插入图片描述
以下实例演示了 center 的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

在这里插入图片描述
以下实例演示了 space-between 的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

在这里插入图片描述
以下实例演示了 stretch(默认值) 的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

在这里插入图片描述
以下实例演示了 flex-start 的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

在这里插入图片描述
以下实例演示了 flex-end 的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

在这里插入图片描述
完美的居中

以下实例将完美解决我们平时碰到的居中问题。
使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>

</body>
</html>

在这里插入图片描述

☀ ◆◆龘 ☽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
单调栈
qq_41075324的博客
10-06 192
单调栈 单调栈的特点： 栈中的元素保持单调递增或递减 递增：入栈时把栈中比当前元素nums[i]小的元素都出栈，直到栈为空或者栈顶元素大于nums[i] 递减：同理 496. 下一个更大元素 I 给你一个数组，返回一个等长的数组，对应索引存储着下一个更大元素，如果没有更大的元素，就存 -1。 例子： 给你一个数组 [2,1,2,4,3]，你返回数组 [4,2,4,-1,-1]。 public int[] nextMax(int[] nums) { if(nums.length ==
css flex布局 —— 项目属性 flex-grow
且听风吟的博客
09-26 3136
css flex布局 —— 项目属性 flex-grow
Html基本结构、语法规则、常用标记/标签
Dodddhdhdg的博客
09-18 1万+
Html基本结构、语法规则、常用标记/标签 （h1-h6/p /i/em/b/hr/br/strong/b/sub/sup/del/）及空格符&nbsp; 注：自己总结的下面分开重点和不重点的地方 一、HTML的定义: HTML:是超文本标记语言（Hpyer text markup language）; XHTML是可扩展超文本标记语言（扩展成XML文档）（Extensible text markup language）; HTML5:指的是第五次大修改规范（新标准）； 二、站`点的定义： 是存放整
css flex布局 —— 项目属性 flex-shrink
热门推荐
且听风吟的博客
10-18 2万+
css flex布局 —— 项目属性 flex-shrink
css flex布局 —— 容器属性 flex-wrap
且听风吟的博客
09-30 592
css flex布局 —— 容器属性 flex-wrap
css flex布局 —— 容器属性 flex-content
且听风吟的博客
09-27 590
css flex布局 —— 容器属性 flex-content
CSS3-flex布局
mangobot的博客
10-28 877
本文主要介绍CSS3+Flex弹性布局，适用于新手入门。
css flex布局 —— 项目属性 flex-basis
且听风吟的博客
10-14 1543
css flex布局 —— 项目属性 flex-basis
css flex布局 —— 容器属性 align-items
且听风吟的博客
09-28 6245
css flex布局 —— 容器属性 align-items
css flex布局 —— 项目属性 align-self
且听风吟的博客
12-14 4655
css flex布局 —— 项目属性 align-self
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
在CSS3的Flexbox布局模型中，`flex-shrink`属性是一个非常重要的概念，它用于控制flex items（弹性元素）在空间不足时的收缩行为。当flex container（弹性容器）的总宽度不足以容纳所有flex items时，`flex-shrink`...
实例讲解CSS3中的box-flex弹性盒属性布局
09-24
在Web开发中，flex布局已经成为了构建响应式和灵活界面的标准工具，因为它克服了传统布局（如浮动布局）的诸多限制。 `box-flex`属性主要作用于父容器的子元素，使得这些子元素可以根据一定的规则按比例分配父容器...
浅谈css sticker-footer 布局
09-24
然而，随着CSS3的引入，特别是Flexbox和Grid布局的出现，实现Sticker-Footer布局变得更加简洁和灵活。 1. **基础CSS Sticker-Footer布局**： 在HTML结构中，我们可以创建一个包含内容和页脚的主容器，例如`...
CSS的box-align属性控制子元素布局实例
09-24
随着CSS的发展，`display: flex`和`align-items`、`justify-content`属性已经成为实现这种布局的首选方法，因为它们提供了更好的浏览器支持和更简洁的语法。但了解`box-align`仍然很有用，因为它可以帮助理解早期的...
html-css-网页模板-汽车介绍
11-23
例如，我们可以使用`background-color`属性改变页面背景，`font-family`定义字体，`padding`和`margin`调整元素间距，`display: flex`或`grid`实现响应式布局，使得网页在不同设备上都能良好显示。 在汽车介绍的...
centos7安装jdk1.8新
07-08
centos7安装jdk1.8
2024年东南亚防火门市场深度研究及预测报告.pdf
最新发布
07-08
东南亚位于我国倡导推进的“一带一路”海陆交汇地带，作为当今全球发展最为迅速的地区之一，近年来区域内生产总值实现了显著且稳定的增长。根据东盟主要经济体公布的最新数据，印度尼西亚2023年国内生产总值（GDP）增长5.05%；越南2023年经济增长5.05%；马来西亚2023年经济增速为3.7%；泰国2023年经济增长1.9%；新加坡2023年经济增长1.1%；柬埔寨2023年经济增速预计为5.6%。 东盟国家在“一带一路”沿线国家中的总体GDP经济规模、贸易总额与国外直接投资均为最大，因此有着举足轻重的地位和作用。当前，东盟与中国已互相成为双方最大的交易伙伴。中国-东盟贸易总额已从2013年的443亿元增长至 2023年合计超逾6.4万亿元，占中国外贸总值的15.4％。在过去20余年中，东盟国家不断在全球多变的格局里面临挑战并寻求机遇。2023东盟国家主要经济体受到国内消费、国外投资、货币政策、旅游业复苏、和大宗商品出口价企稳等方面的提振，经济显现出稳步增长态势和强韧性的潜能。 本调研报告旨在深度挖掘东南亚市场的增长潜力与发展机会，分析东南亚市场竞争态势、销售模式、客户偏好、整体市场营商环境，为国内企业出海开展业务提供客观参考意见。 本文核心内容： 市场空间：全球行业市场空间、东南亚市场发展空间。 竞争态势：全球份额，东南亚市场企业份额。 销售模式：东南亚市场销售模式、本地代理商 客户情况：东南亚本地客户及偏好分析 营商环境：东南亚营商环境分析 本文纳入的企业包括国外及印尼本土企业，以及相关上下游企业等，部分名单 QYResearch是全球知名的大型咨询公司，行业涵盖各高科技行业产业链细分市场，横跨如半导体产业链（半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件）、光伏产业链（设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端）、新能源汽车产业链（动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩）、通信产业链（通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI）、先进材料产业链（金属材料、高分子材料、陶瓷材料、纳米材料等）、机械制造产业链（数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机）、食品药品、医疗器械、农业等。邮箱：market@qyresearch.com
赚积分午点爬虫，我也没太看懂
07-08
赚积分午点爬虫，我也没太看懂
右键菜单功能实现.html
07-08
html+js+css实现 右键菜单功能
css flex 等比布局 flex-grow
01-18
flex-grow属性用于设置flex容器中的项目在剩余空间中的放大比例。它决定了项目在主轴方向上的分配比例。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，而其他项目的flex-grow属性都为1，则前者将占据的空间是后者的两倍。 以下是一个使用flex-grow属性实现等比布局的示例： ```html <div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div> ``` ```css .container { display: flex; } .item { flex-grow: 1; background-color: lightblue; border: 1px solid black; padding: 10px; } .item1 { flex-grow: 2; } .item2 { flex-grow: 1; } .item3 { flex-grow: 1; } ``` 在上面的示例中，容器中有三个项目，其中第一个项目的flex-grow属性为2，而其他两个项目的flex-grow属性都为1。这意味着第一个项目将占据的空间是其他两个项目的两倍。因此，第一个项目将占据50%的剩余空间，而其他两个项目将各占据25%的剩余空间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值