flex布局

参考教程： 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

flex: 原理： flex-direction设置主轴方向，值为row表示主轴为x轴（默认的）： row-reverse主轴翻转： 把主轴设置为column，纵向排列元素： justify-content: 让子元素从左到右排列（默认）： 靠尾部对齐，但子元素顺序不变： 居中： 把空间平均分配，每个子元素的margin的left和right都一样： 2个元素靠边，中间评分空间： 再把主轴设为y轴看一下 flex-wrap:默认为nowrap： 可以改为wrap： align-items: 想让子元素实现主轴居中和侧轴居中： 设置拉伸，此时子盒子高度拉伸为和父亲一样高： align-content: 实现： 实现： 实现： 实现： 区别： flex-flow：简写： flex属性： 通过设置子元素的flex：1，可以理解为这个子元素要占剩余空间的一份，把剩余的大部分空间给div2，就能实现第一个div靠左，第三个div靠右，中间的部分被div2来填充 利用flex实现3等分div： 若第二个span想占2份空间，而其他2个span只想占1份空间，则再加个： align-self: 假定有3个子元素，现在单独让第三个元素放到下面，则单独给它设置样式即可： order属性： 通过调节order，把自己放到别人的前面： 来源： https://www.cnblogs.com/pjishu

body { 　　　 display: flex; /* flex-direction: row; 表示项目在交叉轴的排列方式 flex-wrap: wrap-reverse; */ flex-flow: row wrap-reverse; } body { margin: 0px; display: flex; flex-direction: row; justify-content: space-around; /*表示项目在主轴的排列方式*/ } body { display: flex; flex-direction: column-reverse; /*表示主轴的方向(从下至上)*/ } .box { display: flex; 　　　　 /*用来适配webkit内容的浏览器*/ 　　　　display:-webkit-flex } 来源： https://www.cnblogs.com/wskb/p/12306447.html

弹性盒子学习笔记 一、定义在盒子上的属性（容器上的属性） 使用方法 .box { display : -webkit-flex ; /*在webket内核的浏览器上加上前缀*/ display : flex ; /*将对象作为弹性伸缩盒子显示*/ } 为行内元素设置flex布局 .box { display : inline-block ; /*将对象作为内联块级弹性伸缩盒显示*/ } 二、基本概念 采用flex布局的元素，被称为Flex容器(flex container)， 简称"容器", 其所有子元素自动成为容器成员，成为Flex项目(Flex item), 简称“项目". 三、容器属性 flex-direction 决定主轴的方向 .box { flex-direction : row | row-reverse | column | column-reverse ; } row（默认）：主轴水平方向，起点在左端； row-reverse：主轴水平方向，起点在右端； column：主轴垂直方向，起点在上边沿； column-reserve：主轴垂直方向，起点在下边沿。 flex-wrap 定义换行属性 .box { flex-wrap : nowrap | wrap | wrap-reverse ; } nowrap（默认）：不换行； 不换行nowrap wrap：换行

一 .复杂选择器 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{} 必须是两个 :: 匹配选中部分的文字样式 注意

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

因为 父元素的宽度 是铺满页面，所以 也是基于可视化窗口的垂直居中 .g-cent是父元素，.m-cent是子元素 .g-cent { height: 100vh; display: flex; justify-content: center;/* 水平居中 */ align-items:center;/* 垂直居中 */ } .m-cent { width: 1200px; height: 680px; background: aqua; } 这里解释下父元素设置100vh的原因 Vh:相对于视框的高度：视框高度是100Vh “视框”说白了就是浏览器窗口的高度，也就是window.innerHeight获取的值 1vh=视窗高度的1%，所以100vh也就是100% 如果给父元素直接设置height：100%；没办法实现垂直居中，具体原因不知，如果哪位大佬知道原因，请告知一下，感谢 来源： CSDN 作者： 叫我虫虫就好 链接： https://blog.csdn.net/qq_40319394/article/details/103928087

使用flex布局时先对父盒子设置 display:flex 1.flex-direction：设置主轴的方向（重要，影响其他参数的布局效果） 属性值 含义 row 按行从左到右排列 row-reverse 按照行从右到左排列 column 按照列从上到下排列 column-reverse 按照列从下到上排列 2.flex-wrap：设置子元素是否换行 属性值 含义 nowrap 默认值，不换行 wrap 换行 3.flex-flow :flex direction 和 flex wrap 属性的复合属性 /*例如*/ flex-flow:row wrap; 4.justify-content：设置主轴上的子元素排列方式 属性值 含义 flex-start 默认值从头部开始 如果主轴是 x 轴，则从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐（如果主轴是x 轴则 水平居中） space-around 平分剩余空间 space-between 先两边贴边再平分剩余空间（重要） 5.align-items：设置侧轴上的子元素排列方式（单行） 属性值 含义 flex-start 默认值从上到下 flex-end 从下到上 center 挤在一起居中（垂直居中，使用较多） stretch 侧轴拉伸至父盒子大小（使用较少） 6.align-content

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