flexbox简介

简介:

flexbox简介

什么是flexbox

flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案。它可以简便,完整,完成页面的布局。目前,它已经得到所有浏览器的支持。

但是flexbox从2009年以来,有各种版本的变化,比如2009年版本和2011年版本差别比较大。

为什么要有flexbox

每个新事物出现都有其历史使命的。flexbox也是如此,传统的布局依赖于屏幕的宽度和高度,或者依赖于计算的百分比,但是flex则是直接按照比例关系进行布局展示。

这样做的好处就是当屏幕进行拉升等情况的时候,flex布局的页面仍然符合我们的预期。

比如一个横排布局

|-----|-----|----------|
|  1  |  1  |     2    |
|-----|-----|----------|

平时的布局情况我们就会为1设置宽度25%,2设置宽度50%。但是这个时候,如果我们要变成下面这个布局呢?

|-----|-----|-----|----------|
|  1  |  1  |  1  |     2    |
|-----|-----|-----|----------|

那么我们就需要重新设置比例了,1比例为20%,2比例为40%。

在flexbox中,我们就可以直接设置一个横排为一个flex容器,然后子结构1的比例为1(flex:1),自结构2的比例为(flex:2)。

flexbox都有哪些属性可以设置

强烈推荐(《A Complete Guide to Flexbox》)[https://css-tricks.com/snippets/css/a-guide-to-flexbox/]。文章图文并茂地说了各个属性的各种含义。

父容器的属性

  • display:flex。 表明这个容器是flex布局。
  • flex-direction: row | row-reverse | column | column-reverse; 表明容器里面的子元素的排列方向。
  • flex-wrap: nowrap | wrap | wrap-reverse; 如果子元素溢出父容器的时候是否进行换行。
  • justify-content: flex-start | flex-end | center | space-between | space-around; 这一个容器子元素横向排版在容器的哪个位置
  • align-items: flex-start | flex-end | center | baseline | stretch; 这个容器子元素纵向排版在容器的哪个位置
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch; 当容器内有多行项目的时候,项目的布局

子元素的属性

  • order: ; 子元素的排序
  • flex-grow: ; 分配剩余空间的比例
  • flex-shrink: ; 分配溢出空间的比例
  • flex-basis: | auto;
  • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 在容器中占比
  • align-self: auto | flex-start | flex-end | center | baseline | stretch; 特定某个子元素的排布情况
目录
相关文章
|
.NET C# 容器
WPF自定义LED风格数字显示控件
原文:WPF自定义LED风格数字显示控件 版权声明:本文为博主原创文章,转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/details/52895167 ...
1897 0
|
安全 Windows
win11系统‘ipconfig‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
win11系统‘ipconfig‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
2011 0
win11系统‘ipconfig‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
|
IDE 算法 Java
通义灵码企业级能力全面升级
本指南介绍如何使用通义灵码企业版提升代码质量和效率。首先,需注册并登录通义灵码企业版及 IDE 插件,下载本地工程和知识库压缩包,创建企业知识库并上传文档和代码。随后,可通过开启检索增强功能体验基于企业规范的代码风格优化、前端组件代码补全及后端算法函数生成等功能,显著提高开发效率和代码质量。
359 2
|
8月前
|
机器学习/深度学习 人工智能 安全
GLM-Zero:智谱AI推出与 OpenAI-o1-Preview 旗鼓相当的深度推理模型,开放在线免费使用和API调用
GLM-Zero 是智谱AI推出的深度推理模型,专注于提升数理逻辑、代码编写和复杂问题解决能力,支持多模态输入与完整推理过程输出。
451 24
GLM-Zero:智谱AI推出与 OpenAI-o1-Preview 旗鼓相当的深度推理模型,开放在线免费使用和API调用
|
10月前
|
存储 Kubernetes Docker
使用 Docker 搭建碎片化知识卡片-Memos
Memos 是一个功能全面、易于使用的开源知识库和社交平台,适合个人和企业使用。它支持标签、过滤、搜索和多账户管理,提供多种隐私设置和后端存储选择,支持单点登录和 Docker 部署,注重数据的安全性和私密性。
319 12
使用 Docker 搭建碎片化知识卡片-Memos
|
9月前
|
存储 弹性计算 安全
阿里云服务器配置选择策略参考及后期使用注意事项
对于初次购买阿里云服务器的一些新手用户来说,在云服务器配置选择和后期使用过程中有一些不清楚的地方,小编分享几点阿里云服务器配置选择策略,以及后期使用注意事项,购买过程中注意好下面这些事项,能让我们选对选好阿里云服务器,购买之后,在使用过程中,注意下面这些事项,能够让我们更好、更安全的使用阿里云服务器。下面是小编分享的一份详尽的阿里云服务器配置与使用指南,以供参考和借鉴。
|
9月前
|
人工智能 自动驾驶 安全
“第四次工业革命”-AI革命
“AI变革”被誉为“第四次工业革命”。中国在AI领域持续发力,占亚太地区AI支出的五成,预计2023年市场规模将达到147.5亿美元,约占全球市场的十分之一。IDC预测,中国生成式AI市场年复合增长率将达86.2%。国内企业如百度、阿里、清华等在AI技术研发和应用方面取得显著进展,推动了无人驾驶、送餐机器人、无人快递车等应用场景的发展。尽管AI带来了降本增效,但也引发了就业和社会压力。总体而言,中国在AI领域的投入和发展势头强劲,未来前景广阔。
735 0
“第四次工业革命”-AI革命
|
10月前
|
人工智能 安全 搜索推荐
AI与能源管理:智能电网的未来
本文探讨了AI与智能电网的融合及其对能源管理的深远影响。智能电网利用先进的信息、通信和AI技术,实现电力的自主、智能化、高效管理。AI在精准预测电力需求、实时监测与故障诊断、智能能源调度、个性化能源服务和优化可再生能源利用等方面发挥关键作用,推动能源管理的高效、智能和可持续发展。
|
11月前
|
监控 程序员 芯片
DOS操作系统的发展历程
【10月更文挑战第15天】DOS操作系统的发展历程
466 2
|
12月前
|
人工智能 运维 大数据
阿里云“触手可及,函数计算玩转 AI 大模型”解决方案评测报告
阿里云“触手可及,函数计算玩转 AI 大模型”解决方案评测报告
278 2

热门文章

最新文章