css3弹性盒模型flex快速入门与上手1
一、什么是flex?
flex是css3中引入的一种布局方式，可以非常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局.
二、怎么使用flex?
任何一个容器都可以指定为flex布局
#box {
display:flex;
}
三、flex的基本术语
- 采用flex布局的元素被称为flex容器 (flex container), 它的子元素即为flex元素 (flex item).
- flex容器中包含两个相互垂直的轴, 即主轴 (main axis)和副轴 (cross axis).
- flex元素沿主轴从主轴起点 (main start)到主轴终点 (main end)依次排布.
- 如果flex容器包含多行flex元素, 则flex行 (flex lines)沿副轴从副轴起点 (cross start)到副轴终点 (cross end)依次排布.
- 单个flex元素占据的主轴空间叫做主轴长度 (main size), 占据的副轴空间叫做副轴长度 (cross size).
四、有六个属性设置在父容器上，来控制子元素的显示方式:
| 属性 | 含义 |
|---|---|
flex-direction |
主轴方向 |
flex-wrap |
换行样式 |
flex-flow |
前两个的简写形式 |
justify-content |
主轴对齐方式 |
align-items |
单行的副轴对齐方式 |
align-content |
多行的副轴对齐方式 |
五、flex-direction，设置主轴的对齐方向，有四个值:
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局 - by ghostwu</title>
<style>
#box {
display: flex;
flex-direction: row;
}
#box div {
width: 100px;
height: 100px;
background: #09f;
margin: 10px;
}
</style>
</head> <body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>
</body> </html>
flex-direction设置为row：
flex-direction设置为row-reverse:
flex-direction设置为column，下面的示意图我只截取了前面5个div,后面如果截取的话，图片占的位置太多了，影响体验.
flex-direction设置为column-reverse:
六、flex-wrap ：定义子元素超过一行，如何换行，常用属性值:
- nowrap（默认值）：默认不换行。
- wrap：换行，第二行在第一行下面，从左到右
- wrap-reverse：换行，第二行在第一行上面，从左到右
#box {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
flex-wrap:nowrap;
七、flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row nowrap
#box {
display:flex;
/* flex-flow: row nowrap; */
/* flex-flow: row wrap; */
/* flex-flow: row wrap-reverse; */
/* flex-flow: row-reverse wrap-reverse; */
flex-flow: column wrap;
}
八、 justify-content: 子元素在主轴对齐方式
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。
#box {
display:flex;
flex-flow: row wrap;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
justify-content: space-around;
}
css3弹性盒模型flex快速入门与上手1的更多相关文章
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- CSS3弹性盒模型flex box快速入门 2016.03.16
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- CSS3弹性盒模型，Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- 弹性盒模型 flex box
弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...
- css和css3弹性盒模型实现元素宽度（高度）自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- css3基础教程：CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
随机推荐
- JS基础-----JS中的分支结构及循环结构
[分支结构] 一.if-else结构 1.结构的写法:if(判断条件){ //条件为true时,执行if的{} }else{ //条件为false时,执行else的{} } 2.注意事项 ①else语 ...
- java_eclipse添加DID实现自动提示
便捷无错开发 对于xml 配置没有自动提示是多么恼火就不用说了,eclipse本身很多都是默认关闭了的,如果开发者不知道的话,就不知道怎么去设置,下面介绍几种自动提示设置的方法: XML:获得提示更好 ...
- Swift4.0 Array详解
数组的介绍 数组(Array)是一串有序的由相同类型元素构成的集合,数组中的集合元素是有序的,可以重复出现.在Swift中数组类型是Array,是一个泛型集合.数组分成:可变数组和不可变数组,分别使用 ...
- java读取txt文件内容
package read; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; public ...
- vue学习日志（一）：vue的优势
vue的中文官方文档里面有对比其他框架的具体介绍,这里只是做一个概括总结: 1,在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染.你可以理解为每一个组 ...
- [转载]webarchive文件转换成htm文件
原文地址:webarchive文件转换成htm文件作者:xhbaxf Mac OS X系统带有文件转换功能,可以把webarchive文件变成html文件.方法是: Step 1: 建立一个文件夹 ...
- 个人作业3—个人总结（Alpha阶段)
一.个人总结 在Alpha阶段,我们团队通过合作的方式,完成了之前觉得不大可能会完成的事(至少在我看来是这样的),大家其实之前的写代码能力都不太好,这期间大家都是边学边做,边做边学,最后跌跌撞撞的完成 ...
- 201521123104 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 Object ...
- 201521123011《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- Servlet第六篇【Session介绍、API、生命周期、应用】
什么是Session Session 是另一种记录浏览器状态的机制.不同的是Cookie保存在浏览器中,Session保存在服务器中.用户使用浏览器访问服务器的时候,服务器把用户的信息以某种的形式记录 ...