交叉轴

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 任何一个容器都可以指定为Flex布局。 #box{ display: flex; width: 500px; height: 300px; border: 10px solid red;}一：有六个属性设置在box父容器上，来控制子元素的显示方式；分别是： flex-direction 设置主轴对齐方式 默认 row x轴从左到右； flex-wrap 子元素换行的方式 默认nowrap ； flex-flow flex-direction和flex-wrap的简写 默认row nowrap； justify-content 子元素的对齐方式 默认flex-start 左对齐 align-items align-content 1、flex-direction 决定主轴的对齐方向，分别有四个属性： row （默认值）：主轴为水平方向，起点在左端。 row-reverse ：主轴为水平方向，起点在右端。 column ：主轴为垂直方向，起点在上沿。 column-reverse ：主轴为垂直方向，起点在下沿。 #box{ display: flex; flex-direction:

一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex 布局。 .box{ display:flex; } 　　行内元素也可以使用Flex布局。 .box{ display:inline-flex; } 　　webkit内核的浏览器，必需加上-webkit前缀 .box{ display:-webkit-flex; display:flex; } 二、容器的属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。 .box{ flex-direction:row | row-reverse | column | column-reverse; } 3.2 flex-wrap属性 默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线 排不下，如何换行？ .box{ flex-wrap: nowrap | wrap | wrap-reverse; } // nowrap（默认）：不换行 wrap:换行

以下为个人认为有必要记录的笔记 不喜勿喷 Flex属性和弹性盒模型概述 弹性盒布局基本概念 flex container flex item main axis和cross axis main start和main end cross start和cross end main size和cross size 针对flex容器的属性 flex-direction flex-wrap flex-flow 针对flex条目的属性 order flex-basis flex-grow flex-shrink flex条目的对齐 基于margin: auto对齐 基于主轴对齐 基于交叉轴对齐 flex行的对齐 flex复合属性 Flex属性和弹性盒模型概述 以下几种属性设置在弹性盒布局中是不起作用的： 浮动元素（float） 清除浮动（clear） css3多列布局（columns-*） 垂直居中（vertical-align） 首行/首字符选择伪类（::first-line和::first-letter） 有的flex属性只能作用于flex容器，而有的flex属性只能作用于flex条目 。 传统的布局方案中: 块级布局（block） 默认是将各个块级元素按照 垂直方向自上向下依次堆放 ； 内联布局（inline） 默认是将各个内联元素按照 水平方向按照从左到右的顺序依次堆放 。 弹性盒布局

原文转载： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局（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内核的浏览器，必须加上

网页布局（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: flex; } 注意，设为Flex布局以后

网页布局（layout）是CSS的一个重点应用。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

网页布局（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: flex; } 注意，设为Flex布局以后

作者： 阮一峰 日期： 2015年7月10日 网页布局（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:

Flexbox 布局 弹性盒子是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。 基本概念 采用Flex布局的元素被称为 Flex容器 ，它所有的子级元素自动成为 FlexItem元素 Flexbox 产生的意义 长久以来，唯一可用的且有稳定的跨浏览器兼容性的能用来构建 CSS 布局的工具只有 floats 和 positioning。它们是既可行，表现也不错的布局方案，但是在某些布局方面它们就有限制，并且难以实现。 以下的布局要求很难用（ floats 和 positioning）方便且灵活的实现: 在父内容里面垂直居中一个块内容 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度/子项数量等 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同 Flex容器 容器默认存在两根轴：水平的主轴 main axis 和垂直的交叉轴 cross axis 。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size