Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1、先看一下这些属性对应的值

display: flex |  inline-flex; flex-direction: row | row-reverse | column | column-reverse; //指定了弹性容器中子元素的排列方式

flex-wrap:wrap-reverse; //设置弹性盒子的子元素超出父容器时是否换行。

flex-flow:row-reverse | warp; justify-content:cnter | flex-end | flex-start | space-around | space-between; //设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items:flex-start | flex-end | stretch | baseline | center; //设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-content:stretch | space-around | space-between ; //修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 order: -1 | number; //设置弹性盒子的子元素排列顺序。

flex-grow: 1; //flex-grow属性的值表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例。

flex-shrink: 0; flex-basis: number+px; flex-self:flex-end; //属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由 align-items 所确立的默认值。

flex-flow: //属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布

2、轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴 (main axis )。垂直于主轴的那根轴称为侧轴(cross axis)。

  • flex-direction 属性确立主轴。
  • justify-content 属性定义了在当前行上弹性项目沿主轴如何排布。
  • align-items 属性定义了在当前行上弹性项目沿侧轴默认如何排布。
  • align-self 属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items 所确立的默认值。

3、方位(Direction)

弹性容器的各个边（主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)）描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与侧轴以及由 writing-mode 确立的方向（从左到右、从右到左，等等）。

  • order 属性将元素与序号组关联起来，并决定哪些元素先出现。
  • flex-flow 属性是flex-direction和 flex-wrap 属性的简写，决定弹性项目如何排布。 
    行(Line)
  • 根据flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

4、尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size) 与 侧轴尺寸(cross size)。

flex-grow 设置或检索弹性盒的扩展比率 ,默认是0。 
flex-basis 设置项目初始的宽度，默认是auto 
flex-shrink 设置或检索弹性盒的收缩比率。

flex-grow、flex-shrink 和 flex-basis 可以用flex :flex-grow、flex-shrink  flex-basis  代替

5、指派flex弹性框

  •  display : flex  或   display : inline-flex
6、flex-direction属性的可选值及其含义

　　flex-direction属性确立主轴

  • row（默认值） 主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。
  • row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
  • column 主轴为垂直方向。排列顺序为从上到下。
  • column-reverse 主轴为垂直方向。排列顺序为从下到上。

7、flex-wrap属性的可选值及其含义

　　flex-wrap设置弹性盒子的子元素超出父容器时是否换行。

  • nowrap（默认值）容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
  • wrap 当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
  • wrap-reverse 与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。

8、 justify-content属性的可选值和含义

　　justify-content属性定义了在当前行上弹性项目沿主轴如何排布。

  • flex-start 条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
  • flex-end 条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。
  • center 条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
  • space-between 第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
  • space-around 类似于 space-between，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。

9、align-items属性的可选值和含义

  • flex-start 条目与其所在行在交叉轴起始方向上的边界保持对齐。
  • flex-end 条目与其所在行在交叉轴结束方向上的边界保持对齐。
  • center 条目的空白边盒子margin box在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。
  • baseline 条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。
  • stretch 如果条目的交叉轴尺寸的计算值是“auto”，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。

10、 align-content属性的可选值和含义

(修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐)

  • flex-start 行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。
  • flex-end 行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。
  • center 行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。
  • space-between 行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。
  • space-around 类似于 space-between，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。
  • stretch 伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

来看一个demo

​<!DOCTYPE html>
<meta charset="UTF-8"/>
<html><head><style>*{ margin: 0; padding: 0;}body {font: 24px Helvetica;background: #999999;}#main {min-height: 800px;margin: 0px;padding: 0px;display: -webkit-flex;display:  flex;-webkit-flex-flow: row;flex-flow: row;}#main > article {margin: 4px;padding: 5px;border: 1px solid #cccc33;border-radius: 7pt;background: #dddd88;-webkit-flex: 3 1 60%;flex: 3 1 60%;-webkit-order: 2;order: 2;}#main > nav {margin: 4px;padding: 5px;border: 1px solid #8888bb;border-radius: 7pt;background: #ccccff;-webkit-flex: 1 6 20%;flex: 1 6 20%;-webkit-order: 1;order: 1;}#main > aside {margin: 4px;padding: 5px;border: 1px solid #8888bb;border-radius: 7pt;background: #ccccff;-webkit-flex: 1 6 20%;flex: 1 6 20%;-webkit-order: 3;order: 3;}header, footer {display: block;margin: 4px;padding: 5px;min-height: 100px;border: 1px solid #eebb55;border-radius: 7pt;background: #ffeebb;}/* 窄到已不足以支持三栏 */@media all and (max-width: 640px) {#main{-webkit-flex-flow: column;flex-direction: column;}#main > article, #main > nav, #main > aside {/* 恢复到文档内的自然顺序 */-webkit-order: 0;order: 0;}#main > nav, #main > aside, header, footer {min-height: 50px;max-height: 50px;}}</style></head><body><header>header</header><div id='main'><nav>nav</nav><article>article</article><aside>aside</aside></div><footer>footer</footer></body>
</html>

　　

转载于:https://www.cnblogs.com/wulianghai/p/5613646.html

CSS3 Flexbox 弹性布局相关推荐

  1. CSS3 Flex 弹性布局用法详解

    什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...

  2. CSS3 Flexbox 弹性盒与 css3 阴影效果的演示

    CSS3 Flexbox 演示 CSS3 Flexbox 弹性盒与 css3 阴影效果的演示 https://www.html.cn/demo/flexbox-playground/

  3. Weex Flexbox弹性布局使用

    一.flexbox的关键字 1.在父视图上使用的关键字及对应的内容: display: -webkit-box | -ms-flexbox | flex flex-direction: row | c ...

  4. css3 之弹性布局

    一, 首先了解下flex的七种属性 1,display: flex 设置父元素的flex模式 2,flex-direction: row|row-reverse|column|column-rever ...

  5. CSS3 弹性布局/伸缩布局 flex

    CSS3 之 弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...

  6. html flex布局水平居中,CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    网上有不少关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,遇上新技 ...

  7. CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技 ...

  8. web app 自适应方案总结 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  9. 什么是Flex弹性布局

    什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...

最新文章

  1. 硬币(计算n分有几种表示法)
  2. Entity Framework 博客园专题
  3. php实现input输入框失去焦点自动保存输入框的数据
  4. Linux主机WordPress伪静态设置方法
  5. 使用Core Audio实现VoIP通用音频模块
  6. linux内核之内存管理.doc,linux内核之内存管理.doc
  7. mysql报错1172该怎样解决_ORA-01172、ORA-01151错误处理
  8. 辣味就直往眼睛的专业o2o资讯
  9. kubernetes 启动_如何启动和组织Kubernetes聚会
  10. 计算机科学与技术 军校,清华大学计算机科学与技术系
  11. pacman安装ubuntu_最受欢迎的Linux发行版, Manjaro Linux虚拟机安装折腾全记录
  12. Eddy Cue称FBI可能会要求苹果激活iPhone摄像头并打开麦克风
  13. 一、optimizer_trace介绍
  14. js（JavaScript）：事件，元素（增删改查）
  15. Atitit 团队工具链体系打造---开发方面提升效率的软件与技术体系 attilax总结.docx
  16. 计算机仿真 matlab,计算机仿真(matlab)PPT教程.ppt
  17. 在同一窗口能显示多个幻灯片_如何让两个PPT文件在电脑屏幕中同时显示
  18. 用php实现基本功能,php实现文件管理与基础功能操作的方法
  19. 机器学习面试题总结！！！！
  20. 微信获取授权用户手机号

热门文章

  1. 【leetcode】963. Minimum Area Rectangle II
  2. 基于Keras机器学习库的分类预测
  3. go语言的安装、环境变量配置及简单使用
  4. 【思路题】【多校第一场】【1001.OO’s Sequence】
  5. nodejs笔记--Events篇（二）
  6. leetcode--Longest Substring Without Repeating Characters
  7. .net下操作XML的几篇文章(downmoon收集自MSDN)
  8. 最近找到了一个免费的python教程，两周学会了python开发
  9. TypeScript极速完全进阶指南-2中级篇
  10. 刘海I关于iPhone X 的适配