交叉轴

一、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 。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。 三

一、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。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 三

flex布局 转自阮一峰老师：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 基本概念 使用flex布局的元素称为“容器”（flex container），子元素称为”项目“（flex item） 语法 .box { display : flex ; } 特殊的，Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box { display : -webkit-flex ; display : flex ; } 用一张图来展示一个使用flex布局的元素 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BD06GS8t-1583728198671)(C:\Users\杜广楠\Desktop\bg2015071004.png)] 容器中有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis） 主轴开始的位置为 main start ，结束的位置为 main end 交叉轴开始的位置为cross start ，结束的位置为 cross end 项目中水平的称为main size，垂直的称为cross size

网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、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），简称”项目”。

原作者： 阮一峰 网页布局（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{

参考教程： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 　　　 　 https://xluos.github.io/demo/flexbox/ 语法： 一、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

一 .复杂选择器 3.伪类选择器 ①目标伪类target ②结构伪类 elem:first-child{} 代表两个条件 匹配elem的父元素的第一个儿子（elem的大哥） 这个大哥必须是elem元素 elem:last-child{} 匹配elem的父元素的最后一个儿子(elem的小弟) 这个最小的弟弟必须是elem元素 elem:nth-child(n) 匹配elem的父元素的第n个儿子(n从1开始) 这个儿子也必须是elem元素 ③匹配空元素 :empty{} 空元素 空元素：没有文本，没有空格，没有其他子元素的元素 ④:only-child 匹配，当前元素是其父元素的唯一的子元素 ⑤否定伪类 :not(selector) /*除了第一个a标签，其它a的字体都变成黄色 */ a:not(:first-child){color:#ff0;} /*除了第三个a标签，其它a的字体都变成蓝*/ a:not(:nth-child(3)){color:#f0f;} 4.伪元素选择器 ①内容伪元素 1::first-letter{ } 或 :first-letter{} 匹配首字符的样式 2::first-line{ } 或 :first-line{} 匹配首行的样式 当首行和首字符冲突的时候，以首字符为准 3.::selection{} 必须是两个 :: 匹配选中部分的文字样式 注意

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

今天给大家分享一下flex布局的语法 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍它的语法 以下内容主要参考了阮一峰的网络日志。 一、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

flex有12个属性布局　　 Flex 是它可以简单、完整、响应式的实现各种网页布局，目前已经得到了大多数主流浏览器的支持，有关于它的兼容性可以在 CanIuse 中的查询到 任何一个容器都可以指定为Flex布局 文章中的内容主要借鉴自 Flex布局教程 by阮一峰 学习地址为： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 基本概念： flex container ：采用 Flex 布局的元素，即父元素，称为 Flex容器 ，简称容器。 flex item ：父元素内包含的子元素，称为 Flex项目 ，简称项目。 Flex是没有方向之分的，在Flex容器中默认存在两根轴，水平的轴为 主轴main axis ，垂直的轴为 侧轴cross axis 。（如果改变 flex-direction ，主轴和侧轴也将会改变） 主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end 。 侧轴的开始位置叫做 cross start ， 结束位置叫做 cross end 。 项目默认沿主轴方向排列，单个项目占据的主轴空间叫做 main size ，侧轴空间叫做 cross size 。 以上概念用图表示，如下： 注意：设为Flex布局后，子元素的 float 、 clear 、