CSS之Flexbox制作CSS布局易如反掌

伸缩盒模型（flexbox）是一个新的盒子模型，主要优化了UI布局。作为实际布局的第一个CSS模块（浮动真的应该主要用来制作文本围绕图片这样的效果），它使很多任务容易多。Flexbox的功能主要包手：简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能

案例1：水平和垂直居中（网页设计的圣杯）

HTML:

CSS：

你可能注意到了，h1元素的文本也在内部垂直居中。这里没使用margin或者line-height，但是我们再次使用了flexbox，让文本变成了一个匿名伸缩项目（在这个案例中，行文本是h1内的元素）。无论h1元素有多高，文本将永远垂直居中

总结：通过设置html和body都是100%让其充满屏幕显示，然后使用align-items和justify-content属性来保证内容的水平垂直居中，我们通过设置body为flex，让其中所有子元素(不包括绝对定位的元素)都变成了伸缩项目

案例2：伸缩尺寸

HTML和CSS类似于前一个示例。使用相同的方法，把所有元素在页面中居中显示。此外，我们让标题（header元素内）保持不变的尺寸，其他五个盒子（section元素）根据浏览器宽度自动调整大小。因此我们要使用一个新的属性“flex”

我们做的是让每个section元素占有1flex单元。因为我们还没有给五个section元素明确的设置宽度，而每个section元素都有相同的宽度。把“header”设置了一个宽度（277px），因为他不是伸缩性的。我们把body剩下的宽度计算到每个section元素中。现在，我们来改变浏览器窗口大小，section元素将会扩展或收缩

注：现在可用的空间除以6，而在悬浮状态是占有2份。注意：一个元素的2flex单元并不一定就是1flex单元宽度的两倍。它只获得了添加两倍比例到他的可用空间的首先宽度。在我们的示例中，首先宽度是0（默认状态下）

CSS之Flexbox制作CSS布局易如反掌相关推荐

如何快速编写纯CSS菜单？制作CSS精美菜单优化精简代码详细教程
第一步:编写html菜单文字部分: 这里我们就用ul无序列表的方式写一个简单的菜单格式,并给ul标签加一个自定义的类"daohang"(这个可以修改,只要css调用和这里的一致即可 ...
响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
html如何制作响应式网站,使用HTML和CSS构建响应式网站布局
大多数现代网站使用响应式网页设计,现在您必须考虑实际反应的意义,响应式网站可以适应不同的屏幕尺寸,并可以相应地调整其设计和布局. 在本教程中,我们将学习如何使用HTML和CSS进行响应式网站设计,但首 ...
css中东布局rtl_如何将RTL支持添加到Flexbox和CSS网格
css中东布局rtl 逻辑属性定义了一种新方法,该方法改变了我们在CSS中使用布局的方式. 除其他优点外,它们还使我们能够基于逻辑属性(Flexbox和CSS网格)向布局添加RTL(从右到左)语言支持 ...
flexbox布局_这是您可以使用FlexBox制作的5种布局
flexbox布局 The CSS Flexible Box Layout - Flexbox - provides a simple solution to the design and layou ...
css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了
简介: 这篇文章专门对比 Flutter Widget 的布局原理和 CSS 布局原理的差异,分享在对接过程中会遇到的问题和解决方案,帮大家理一理思路,内容可以分为这几部分:1.CSS 和 Widge ...
flex.css快速入门，极速布局
什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚,flex.css就是对fle ...
CSS之深入理解 flex 布局以及计算
起因:对于Flex布局,阅读了大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档 ...

CSS之Flexbox制作CSS布局易如反掌

案例1：水平和垂直居中（网页设计的圣杯）

HTML:

CSS：

你可能注意到了，h1元素的文本也在内部垂直居中。这里没使用margin或者line-height，但是我们再次使用了flexbox，让文本变成了一个匿名伸缩项目（在这个案例中，行文本是h1内的元素）。无论h1元素有多高，文本将永远垂直居中

总结：通过设置html和body都是100%让其充满屏幕显示，然后使用align-items和justify-content属性来保证内容的水平垂直居中，我们通过设置body为flex，让其中所有子元素(不包括绝对定位的元素)都变成了伸缩项目

案例2：伸缩尺寸

HTML和CSS类似于前一个示例。使用相同的方法，把所有元素在页面中居中显示。此外，我们让标题（header元素内）保持不变的尺寸，其他五个盒子（section元素）根据浏览器宽度自动调整大小。因此我们要使用一个新的属性“flex”

注：现在可用的空间除以6，而在悬浮状态是占有2份。注意：一个元素的2flex单元并不一定就是1flex单元宽度的两倍。它只获得了添加两倍比例到他的可用空间的首先宽度。在我们的示例中，首先宽度是0（默认状态下）

CSS之Flexbox制作CSS布局易如反掌相关推荐

最新文章

热门文章