flex布局

css中我们我们最常用的弹性布局，

由 旧城冷巷雨未停 提交于 2019-11-27 07:47:22
弹性布局的一些常见的用法 1 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 Flex项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 Flex属性分为两部分，一部分作用于容器称容器属性，另一部分作用于项目称为项目属性。下面我们就分部的来介绍它们。 弹性布局的一些使用 ① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式； ② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流； ③display:flex;容器添加弹性布局后，显示为块级元素；display:inline-flex;容器添加弹性布局后，显示为行级元素； ④ 设为Flex布局后，子元素的float、clear和vertical

弹性布局的属性

由 不打扰是莪最后的温柔 提交于 2019-11-27 07:47:18
弹性布局的属性 属性及作用 1、 display:flex; 弹性布局，父级 2、 flex-deriction 方向，父级 3、 flex-wrap 换行，父级 4、 justify-content 水平对齐方式，写在父级 5、 align-items 垂直对齐方式，写在父级 6、 align-content 垂直对齐方式，用于修改 flex-wrap 属性的行为(如果不换行，则无效),写在父级 7、 align-self 垂直对齐方式，写在子级 8、 order 排序，子级 9、 flex 分配空间,如果写的全是数字和字母不会自动断行，会导致占比比较多，子级 慎重使用 10、 flex-basis 定义弹性盒子元素的默认基准值，写在子级 11、 flex-grow 定义弹性盒子元素的扩展比率,写在子级 12、 flex-shrink 定义弹性盒子元素的默认基准值，写在子级 注意： 1、 flex布局，子级元素如果没有给高度，子级会自动继承父级的高度。别的布局不会,设置了align-slef也不会。无论什么布局子级的div的宽度都可以继承父级div的宽度。 2、 弹性布局，会保留margin和padding的宽度。子元素别的宽度会根据比例缩放。 3、 在没有设置子元素宽度的情况下，默认是80.138px; 4、 在没有设置子元素宽度和高度的情况下，横向排列最小的高度是20.8

布局：flex弹性布局_实践02

由 邮差的信 提交于 2019-11-27 04:44:40
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>H5标准页面</title> <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" /> </head> <body class="site"> <article class="cus-cell"> </article> <aside class="cus-cell cell-4 column"> <div class="cus-cell"> </div> <div class="cus-cell cell-3"> </div> </aside> </body> </html> .site{ margin:0; padding:0; display:-webkit-flex; display:flex; min-height:100vh; } .cus-cell{ flex:1 1 0%; border:1px solid red; } .cell-Full{ flex:0 0 100%; } .cell-2{ flex:0 0 50%; } .cell-3{ flex:0 0 33.3333%; } .cell-4{ flex:0 0 25%; } .column{

CSS | Flex

由 泄露秘密 提交于 2019-11-27 03:29:31
Flex主要的用法在阮一峰老师的博客中写的非常清楚： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 这里重点记录一下flex-grow、flex-shrink、flex-basis三个item属性的用法 在很多布局中我们会看到 flex:1 或者flex:auto 这样的写法，其实flex是这三个属性的简写： flex : flex-grow | flex-shrink | flex-basis flex-grow: 若取0，则代表item即使主轴上有剩余空间，也不会增大； 若取1，则代表item会获取主轴上剩余空间的一份； 若取大于1的整数，而其他item都为1，则该item获取更多的剩余空间 flex-shrink: 类似grow，取0 | 1 定义item是否会因为主轴空间不足而变小 flex-basis： 若取auto，若item由设置宽度，就为宽度，否则表示item的大小被内容撑开; 取百分比(相对父元素)或固定宽度; 若取0，表示大小由shrink和grow决定以及主轴剩余空间决定 flex:1 => 当 flex 取值为一个非负数字，则该数字为 flex-grow 值， flex-shrink 取 1， flex-basis 取 0% flex: auto =>

布局：flex弹性布局_实践01（

由 自古美人都是妖i 提交于 2019-11-27 03:01:18
一、等分：平均分布。在容器里面平均分配空间，需要设置项目的自动缩放。 section{ display:-webkit-flex; display: flex; } article,aside { flex: 1; border:1px solid red; } 　　 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>H5标准页面</title> <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" /> </head> <body> <section> <article>… </article> <aside>… </aside> </section> <section> <article>… </article> <aside>… </aside> <aside>… </aside> </section> <section> <article>… </article> <aside>… </aside> <aside>… </aside> <aside>… </aside> </section> </body> </html 二、百分比布局：某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。 section{

Flex 布局教程：语法篇

由 非 Y 不嫁゛ 提交于 2019-11-26 19:29:07
原文转载： 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内核的浏览器，必须加上

Flex 布局教程：语法篇

由 断了今生、忘了曾经 提交于 2019-11-26 19:28:57
网页布局（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布局以后

Flex 布局教程：语法篇

由 非 Y 不嫁゛ 提交于 2019-11-26 19:28:36
网页布局（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）

Flex 布局教程：语法篇

由 安稳与你 提交于 2019-11-26 19:28:16
网页布局（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布局以后

Flex 布局教程：语法篇

由 不羁的心 提交于 2019-11-26 19:28:02
作者： 阮一峰 日期： 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:
订阅 flex布局