Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。

Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为    flex  或  inline-flex     可以得到一个伸缩容器

设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。

例如:此处将 类名为   flex-container   的元素设置为伸缩容器

.flex-container {
display: -webkit-flex;
display: flex;
}

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。

简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

Flex Lines 伸缩行  

伸缩项目沿着伸缩容器内的一个 伸缩行 定位。通常每个伸缩容器只有一个伸缩行。  默认伸缩行从左往右

例子:

 <div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
</div> 样式: .flex-container {
display: -webkit-flex;
display: flex;
width: 300px;
height: 240px;
background-color: Silver;
} .flex-item {
background-color: DeepSkyBlue;
width: 100px;
height: 100px;
margin: 5px;
}

效果图:

再加

<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 4</div>

伸缩项目的宽度超过了 伸缩容器的宽度,伸缩容器的宽度不会改变,伸缩项目的宽度减小
 <div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
</div> CSS样式
.flex-container {
direction: rtl;
display: -webkit-flex;
display: flex;
width: 300px;
height: 240px;
background-color: Silver; } .flex-item {
background-color: DeepSkyBlue;
width: 100px;
height: 100px;
margin: 5px;
}

效果:

伸缩行从右往左,文字也从右往左

为了描述抽象的书写模式,Flexbox 使用 主轴 和 侧轴的概念。伸缩行跟随主轴。侧轴则垂直于主轴。

flex-direction 伸缩流的方向

默认值  row

再次提醒,默认是从左至右,从上到下。其他的值如下:

  • row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右,伸缩项目则是从左往右显示。
  • column: 主轴和侧轴交换。如果书写系统是垂直的,那么伸缩项目也是垂直显示的。
  • column-reverse: 和 column 一样,但是方向相反。

justify-content 主轴对齐

用于调整主轴上伸缩项目的位置。可能的值为:

  • flex-start (默认)
  • flex-end
  • center
  • space-between
  • space-around

align-items 侧轴对齐

调整伸缩项目在侧轴上的定位方式。可能的值有:

  • flex-start (默认)
  • flex-end
  • center
  • baseline
  • stretch

flex-wrap 伸缩行换行

为伸缩容器创建多个伸缩行。这个属性接受以下值:

  • nowrap (默认)
  • wrap
  • wrap-reverse

align-content 堆栈伸缩行

它对齐的是伸缩行,它接受的值:

  • stretch (默认)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

flex-flow 伸缩方向与换行    是flex-directionflex-wrap的缩写。

flexbox 伸缩布局盒的更多相关文章

  1. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  2. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  3. CSS3 伸缩布局盒模型

    CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...

  4. 深入了解 Flexbox 伸缩盒模型

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...

  5. 第10章 布局样式相关-伸缩布局(Flexible Box)

    伸缩布局(一) CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或 ...

  6. CSS3中的Flexbox弹性布局(一)

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

  7. flexbox弹性伸缩布局

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  8. CSS3弹性盒模型之Flexbox是布局模块box-sizing & box-orient & box-direction & box-ordinal-group

    css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,bord ...

  9. CSS3弹性伸缩布局(中)——flexbox布局

    混合过渡版 上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局. 混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功 ...

随机推荐

  1. Oracle提示“资源正忙,需指定nowait”的解决方案

    Oracle提示“资源正忙,需指定nowait”的解决方案  | T 本文我们主要介绍了Oracle数据库操作表时提示“资源正忙,需指定nowait”的解决方案,希望能够对您有所帮助. AD:51CT ...

  2. 《转》精巧好用的DelayQueue

    该文章转自:http://www.cnblogs.com/jobs/archive/2007/04/27/730255.html 我们谈一下实际的场景吧.我们在开发中,有如下场景 a) 关闭空闲连接. ...

  3. C/C++代码静态检查工具Cppcheck在VS2008开发环境中的安装配置和使用

    Cppcheck is an analysis tool for C/C++code. Unlike C/C++ compilers and many other analysis tools, it ...

  4. 2016 Multi-University Training Contest 3 总结

    又是多校总结时间. 这两天重感冒,精神不佳,总结一拖再拖,结果到了多校第四场结束后回来总结第三场.不过因为还在补第三场的题,所以还是记得挺清楚的 欣君说决定自己AFK试试,于是全程读题算公式. 欣君翻 ...

  5. [转]Linux Shell History (快速使用Linux命令)

    http://www.blogjava.net/lihao336/archive/2010/10/11/334367.html Linux Shell History (快速使用Linux命令) Li ...

  6. qemu 调试(二)

    我见过最全的剖析QEMU原理的文章 qemu代码分析 qemu中ELF文件的加载 几个关键点,可以设计断点,观察. $ cat command.gdbset breakpoint pending on ...

  7. css首行缩进两个字符串

    text-indent:2em; 这个属性就可以缩进,但是2em不确定是什么意思:抽空总结一下

  8. Date Time Picker控件

    Step1 在界面中添加一个Date Time Picker控件,ID为:IDC_DATETIMEPICKER1 Step2 该控件关联变量 CDateTimeCtrl m_dateCtrl; Ste ...

  9. 自学JQuery Mobile的几个例子

    JQuery Mobile是一个用于构建移动Web应用程序的框架,适用于主流的移动设备(智能手机.平板电脑),该框架利用了HTML5和CSS3技术减少了额外的脚本文件的编写.具体JQuery Mobi ...

  10. Duff 装置中case情况越多性能越好

    猜想:Duff装置再循环里面,直接调用的方法越多(也就是case的数量比较多),性能相对越好 ???!!! 我们基于Duff装置来做进一步的测试. 然后分别添加两个新的函数,一个函数式 case有4种 ...