交叉轴

弹性盒子布局(flex布局) 弹性盒子布局方式： .box{ display:flex; } @设为Flex布局后，子元素的float、clear和vertical-align属性将失效 @采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 @容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 / 容器属性设置 / 1.flex-direction属性 决定主轴的方向（即项目的排列方向） //水平方向 row(默认值） 主轴方向为水平方向，起点在左端 row-reverse 主轴方向为水平方向，起点在右端 //垂直方向 column 主轴方向为垂直方向，起点在上沿 column-reverse 主轴方向为垂直方向，起点在下沿 2.flex-wrap属性 默认情况下，项目都排在一条线（又称“轴线”）上。 flex-wrap属性定义了

flex布局的基本简介 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 flex布局示意图 flex 属性 应用在flex-container上的属性 display:flex 将盒子模型设置为flex布局，盒子为横向排列（就是沿着主轴的方向排列），display:inline-flex定义为flex盒子的行内元素 外面的盒子为flex-container,里面的盒子为flex-item，主轴默认为从左到右，交叉轴为从上到下 flex-direction 决定主轴的方向。是从左到右，从右到左，或是从上到下，从下到上。 flex-direction:row：设置为纵向排列，从左到右的排列方式（默认值） flex-direction:row-reverse：也为横向排列，但是方向为从右到左 flex-direction:column：设置为纵向排列，从上到下 flex-direction

原文: CSS3(5)---伸缩布局(Flex) CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章： 1、 CSS(5)---盒子模型 2、 CSS(6)---浮动(float) 3、 CSS(8)---定位(position) 一、什么是Flex 布局 1、Flex 布局特点 上面三种布局都是基于盒状模型。依赖 display属性 + position属性 + float属性 。它对于有些特殊布局并不友好，比如，垂直居中就不容易实现，会有溢出容器的问题。 Flex是意思是”弹性布局”，它可以为盒状模型提供最大的灵活性。主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以 最佳的方式填充可用空间 。 简单来讲就是当你设置好父元素的宽度或者高度,对于它的子元素会根据父类的宽度或者高度来填充可用空间。 2、Flex 布局 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局 。 .box{ display: inline-flex; } 注意 设为 Flex 布局后，CSS的columns在伸缩容器上没有效果。 子元素(伸缩项目)的 float、clear和vertical-align属性将失效 二、重要概念 1、容器和项目 容器 采用Flex布局的元素，称为Flex容器，简称

flex 布局学习 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center 、 verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。 在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align 、 valign 来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式： 标准文档流 、 浮动布局 和 定位布局 。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 margin: 0 auto ，实现水平垂直同时居中可以如下设置： .dad { position: relative; }复制代码 .son { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left:

CSS3 Flex布局（伸缩布局盒模型）学习 转自：http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局：块布局、行内布局、表格布局盒定位布局。 CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒（Flexible Box）模型，此布局对于设计比较复杂的页面非常有用，特别是“垂直居中”布局，非常容易实现。 Flexbox布局语法有三种： 旧版本：2009年版本，使用display:box或者display:inline-box; [目前仅Safari浏览器支持] 混合版本：2011年版本，使用display:flexbox或者display:inline-flexbox; [仅IE10支持] 最新版本：使用display:flex或者display:inline-flex. [目前的主流浏览器均支持，不过在Webkit内核浏览器需要使用前缀“-webkit-”] 对于Flex布局，最初是通过看绿叶学习网，学的是flexbox旧版本，感觉很简单；然后又看了大漠老师的《图解CSS3-核心技术与案例实战》，其中详细介绍了三种布局，但我理解的不深，有些迷糊。最后通过网上找到了阮一峰翻译的一篇文章，直观易懂，终于明晰了Flex布局。 关于Flexbox布局旧版本（display:box/inline-box

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。 以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex;} 行内元素也可以使用Flex布局。 .box{ display: inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex;} 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素

一、概念 弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。 二、目的 引入盒模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。 三、内容 弹性盒子由弹性容器和弹性子元素组成 性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器 弹性容器内包含了一个或多个子元素 flex-flow flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为（row nowrap） justify-content 定义了项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around; flex-start（默认值）： 左对齐 flex-end： 右对齐 center： 居中 space-between： 两端对齐，项目之间的间隔都相等。 space-around： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 justify-content align-items 属性定义项目在交叉轴上如何对齐 align-items: flex-start | flex-end |

【弹性布局】 1、了解两个概念 容器：需要添加弹性布局的父元素； 项目：弹性布局容器中的每一个子元素，称为项目。 2、弹性布局的使用 ①给父容器添加display：flex/inline-flex；属性，即可以式容器内采用弹性布局显示，而不遵循常规文档流的显示模式； ②容器添加弹性布局后，仅仅是容器内采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流方式； ③display：flex；容器添加弹性布局后，显示为块级元素； ④display： inline-flex；容器添加弹性布局后，显示为行级元素； 设为弹性布局后，子元素的float、clear、vertical-align属性将失效，但是position属性，依然生效。 【容器作用于容器的相关属性】 1、flex-direction属性决定主轴的方向（即项目的排列方向）。 row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2、flex-wrap属性定义，如果一条轴线排不下，如何换行。 （1）nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。 3、flex

作者： 阮一峰 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍它的语法， 下一篇文章 给出常见布局的Flex写法。 以下内容主要参考了下面两篇文章： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 . box { display : flex ; } 行内元素也可以使用Flex布局。 . box { display : inline - flex ; } Webkit内核的浏览器，必须加上 -webkit 前缀。 . box { display : - webkit - flex ; /* Safari */ display

网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法， 下一篇文章 给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo ，也可以参考。 以下内容主要参考了下面两篇文章： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit