交叉轴

网页布局（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

布局的传统解决方案，基于 盒状模型 ，依赖 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-flex; /* Safari */ display

页面自适应 自适应是指页面内容自动适应屏幕大小，实现自适应的方法有多种： 1.简易场景实现自适应：浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。 2.如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用 媒体查询技术 ，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏幕尺寸的设备都有单独一套CSS代码，维护起来更方便。 3.响应式布局，响应式布局是指根据不同屏幕尺寸自动调整页面显示效果实现自适应(也要用到 媒体查询技术 )。响应式布局一般有栅格系统布局，flex布局。 bootstrap框架的核心就是栅格系统。 （后面详细介绍栅格系统的实现方式）。 CSS3 媒体查询 media queries 媒体查询可针对不同设备场景使用不同css，一般栅格系统和多套代码逻辑匹配页面是都要用媒体查询来确定页面大小。媒体查询技术的原理： 通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。 常用匹配特征 media features width/height: 浏览器宽高 max-width： 表示小于最大宽度时生效 min-width： 表示大于最小宽度时生效 device-width/device-height:

以下内容主要摘抄自阮一峰老师的博客 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 背景 Flexbox布局（Flexible Box）模块（目前是W3C Last Call Working Draft）旨在提供更有效的布局方式，即使容器中的项目之间对齐和分配空间的大小未知或动态（因此单词“flex”）。 flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。Flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。 最重要的是，flexbox布局与方向无关，而不是常规布局（基于垂直的块和基于水平的内联块）。虽然那些适用于页面，但它们缺乏灵活性来支持大型或复杂的应用程序（特别是在方向更改，调整大小，拉伸，缩小等方面）。 注意： Flexbox布局最适合应用程序的组件和小规模布局，而Grid布局则适用于更大规模的布局。 基本概念 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与侧边的交叉点）叫做 main-start ，结束位置叫 main end ；交叉轴的开始位置叫 cross start ，结束位置叫 cross end 。 项目默认沿主轴排列

一、简要介绍 　　flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。 　　 主要思想是给予容器控制内部元素高度和宽度的能力 。目前已得到以下浏览器支持： 　　 　　其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀 　　采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。 　　它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 　　下图为flex的相关概念的示意图 　　 　　 　　使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。 　　容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。 　　主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end； 　　交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。 　　item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。 　　此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。 二

参考资料： >>>这里 资料上面已经非常完善了，所以是一个转载，当笔记来用。 一、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 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。 项目默认沿主轴排列

本文章转载自阮一峰老师的博客，仅为学习所用，地址 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（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 布局。

资料来源于阮一峰 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（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

flex盒子模型由容器（flex container）以及容器的直接子元素（flex item）组成。 以容器（flex container）定义，有主轴（main axis）以及交叉轴（cross axis）,主轴的开始位置（与边框的交叉点）叫做main start,结束位置叫做main end.交叉轴的开始位置叫做cross start，结束位置叫做cross end。 （注意:当布局排列方式变化的时候，main axis跟cross axis的方向也会跟着变化,这一点非常重要）主轴(main axis)可以是水平方向,也可以是垂直方向,而交叉轴(cross axis)始终是与主轴垂直 display: flex | inline-flex(适用于父类容器元素上) 定义一个flex容器，内联或者根据指定的值，来作用于下面的子类容器。 box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本2009） flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本2011） flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本） 首先得指定元素是flex布局 块状元素 -> display:flex 行内元素 -> display:inline-flex 例如: .box{ display:flex; } flex-direction(适用于父类容器的元素上)： 确定主轴的方向 flex

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 [css] view plain copy .box 1 { display : flex; } .box 2 { display : inline-flex; <span style= "font-family: Arial, Helvetica, sans-serif;" > /*</span><span style="font-family: Arial, Helvetica, sans-serif;">行内元素也可以使用Flex布局。*/ </span> } .box 3 { display : -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/ display : flex; } 样式属性中，display:flex; 与 display:inline-flex; 的区别 display:flex; //元素转变为块级元素 display:inline-flex; //元素转变为行内块级元素