【CSS3】 CSS3:弹性盒子(Flex Box)
一, Flex布局是什么
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。Flex布局是W3C组织于2009年提出的一种布局方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex布局将会成为未来布局的首选方案。
二,如何指定一个容器为Flex布局
只需要在容器中添加值为flex的display属性。
.box{
display: flex;
}
三,Flex的基本语法
display
语法: display:flex;
指定Flex。
flex-direction
语法: flex-direction: row | row-reverse | column | column-reverse
指定弹性子元素在父容器中的排列顺序。这个也可以通过设置 direction:rtl; 或是 direction:ltr; 来等效实现,其中的rtl、ltr是right to left、left to right的简写。
justify content
语法: justify-content: flex-start | flex-end | center | space-between | space-around
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
概念理解图:
其中space-around,笔者总结了一个简单的公式:
x=(W2-N*W1)/(2N)
x:最两边留下的宽度。
W2:就是模块的width。
W1:一个子模块的宽度(每个均匀)。
N:
align-items
语法: align-items: flex-start | flex-end | center | baseline | stretch
设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
下面这张图片可以帮助读者理解baseline:
flex-wrap
语法: flex-flow: nowrap | warp | warp-reverse
align-content
语法: align-content: flex-start | flex-end | center | space-between | space-around | stretch
设置各个行的对齐方式。
align-self
语法: align-self: auto | flex-start | flex-end | center | baseline | stretch
设置弹性元素自身在侧轴方向的对齐。这个属性要区别与align-content,align-content的范围是每一行,然而align-self只是某一行里面的某个弹性元素。
flex-flow
语法:flex-direction和flex-wrap的简写。
flex
语法: flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
指定元素分配空间。需要注意,如果flex-basis为100%,那么该弹性模块就会单独占一行。
oder
语法: order: number|initial|inherit;
指定弹性模块的排列顺序,其中值越小,越优先,可以为负值。
四,示例
1,骰子的布局
骰子的一面,最多可以放置9个点。
下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明,本节的HTML模板一律如下。
<div class="box">
<span class="item"></span>
</div>
上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。
1.1 单项目
首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。
.box {
display: flex;
}
设置项目的对齐方式,就能实现居中对齐和右对齐。
.box {
display: flex;
justify-content: center;
}
.box {
display: flex;
justify-content: flex-end;
}
设置交叉轴对齐方式,可以垂直移动主轴。
.box {
display: flex;
align-items: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
.box {
display: flex;
justify-content: center;
align-items: flex-end;
}
.box {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
1.2 双项目
.box {
display: flex;
justify-content: space-between;
}
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.box {
display: flex;
} .item:nth-child(2) {
align-self: center;
}
.box {
display: flex;
justify-content: space-between;
} .item:nth-child(2) {
align-self: flex-end;
}
1.3 三项目
.box {
display: flex;
} .item:nth-child(2) {
align-self: center;
} .item:nth-child(3) {
align-self: flex-end;
}
1.4 四项目
.box {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}
HTML代码如下。
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
CSS代码如下。
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
} .column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
1.5 六项目
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-between;
}
HTML代码如下。
<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
CSS代码如下。
.box {
display: flex;
flex-wrap: wrap;
} .row{
flex-basis: 100%;
display:flex;
} .row:nth-child(2){
justify-content: center;
} .row:nth-child(3){
justify-content: space-between;
}
1.6 九项目
.box {
display: flex;
flex-wrap: wrap;
}
2,圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
HTML代码如下:
<div class="flex-container">
<header class="header">头部</header>
<article class="main">
<p>主体</p>
</article>
<aside class="aside aside1">边栏 1</aside>
<aside class="aside aside2">边栏 2</aside>
<footer class="footer">底部</footer>
</div>
CSS代码入下:
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
} .flex-container > * {
padding: 10px;
flex: 1 100%;
} .main {
text-align: left;
background: cornflowerblue;
} .header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;} @media all and (min-width: 600px) {
.aside { flex: 1 auto; }
} @media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside1 { order:; }
.main { order:; }
.aside2 { order:; }
.footer { order:; }
}
五,参考文章
https://davidwalsh.name/flexbox-dice
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
http://www.runoob.com/css3/css3-flexbox.html
本文章为博主原创作品,若需转载请注明出处。
【CSS3】 CSS3:弹性盒子(Flex Box)的更多相关文章
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- 弹性盒子Flex Box滚动条原理,避免被撑开,永不失效
在HTML中,要实现区域内容的滚动,只需要设定好元素的宽度和高度,然后设置CSS属性overflow 为auto或者scroll: 在Flex box布局中,有时我们内容的宽度和高度是可变的,无法 ...
- CSS3 弹性盒子(Flex Box) 微信小程序图片通栏
{{define "chkUrl"}} <!DOCTYPE html><html lang="zh-cmn-Hans"><head ...
- CSS3总结五:弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- 认识弹性盒子flex
认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...
- css3弹性盒子 flex布局
CSS3 弹性盒 1.display:flex 说明: 设置为弹性盒(父元素添加) 2.flex-direction(主轴排列方式) 说明: 顺序指定了弹性子元素在父容器中的位置 row 默认在一行内 ...
- css3系列之弹性盒子 flex
弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性 ctrl + F 如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:f ...
- CSS3新属性之---flex box布局实例
flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...
- CSS3 -- FlexBox(弹性盒子)
盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...
- CSS 弹性盒子 flex的三个属性:grow、shrink、basis
flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...
随机推荐
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- Bmob基础
BaaS是指专为移动应用开发者提供整合云后端的服务.开发者无需过多研究服务器端程序,而只需调用云计算平台提供的API,使用相应SDK,就能迅速完成数据存储.账户管理.消息推送.社交网络整合等功能.本文 ...
- QQ5.0左侧滑动显示效果
前三篇为大家介绍了如何实现简单的类QQ5.0左侧的侧滑效果,本篇我将带领大家一起探讨一下如何真正实现QQ5.0左侧的侧滑效果,对于本篇的内容与之前的三篇关联性很强,如果前三篇你已经完全掌握,对于这一篇 ...
- ZOJ3805Machine(二叉树左右子树变换)
/* 题意:建立一棵二叉树,左子树和父节点占一个宽度,右子树另外占一个宽度! 使任意左右子树交换顺序,使得整个树的宽度最小! 思路:递归交换左右子树 ! 开始写的代码复杂了,其实左右子树不用真的交换, ...
- Docker如何为企业产生价值?
一个 IT 系统大致可以分为: 应用程序 运行时平台(bin/framework/lib) 操作系统 硬件(基础设施) 开发人员的主要工作是应用程序的编码.构建.测试和发布,涉及应用程序和运行时平台这 ...
- Kubernetes系统架构简介--转
原文地址:http://www.infoq.com/cn/articles/Kubernetes-system-architecture-introduction?utm_campaign=infoq ...
- HTML5移动Web开发(五)——移动设计之CSS媒介查询
CSS媒介查询(media query)是响应式设计中很重要的部分,它帮助你实现更加灵活的移动设计. 看示例代码ch01r06_c.html <!doctype html> <htm ...
- Gephi可视化(二)——Gephi Toolkit叫板Prefuse
继在园子里写的<Gephi可视化(一)——使用Gephi Toolkit创建Gephi应用>介绍了如何使用Gephi Toolkit工具集进行可视化编程后,本篇对Gephi Toolkit ...
- Animo.js :一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- 实例演示Android异步加载图片(转)
本文给大家演示异步加载图片的分析过程.让大家了解异步加载图片的好处,以及如何更新UI.首先给出main.xml布局文件:简单来说就是 LinearLayout 布局,其下放了2个TextView和5个 ...