flex布局

css---flex布局--容器

阅读更多关于 css---flex布局--容器

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 容器设置新版的为display为flex 老版的为display为webkit-box；布局方向老版的布局方向 flex-direction: row; -webkit-box-orient: horizontal; flex-direction: column; -webkit-box-orient: vertical; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> { margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display:flex; /*x排列*/ flex-direction: column; } #wrap > .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; } </style> </head

CSS中的Flex布局

阅读更多关于 CSS中的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），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴排列

对于BFC(block format context)理解

阅读更多关于对于BFC(block format context)理解

前言什么是BFC？在解释 BFC 是什么之前，需要先介绍Box（块级，行级...）、FormattingContext的概念。 Box: CSS布局的基本单位&盒模型盒模型--块级盒/行内盒一个盒包括了内容(content)、边(border)、内边距(padding)、外边距(margin)。下图展示了盒模型的直观意义：盒的尺寸（width与height--计算得到的offsetWidth和offsetHeight）定义受到box-sizing属性的影响。box-sizing可选择content-box(默认)和border-box两种模式。分别代表两种盒子模型:W3c标准盒模型和IE盒子模型。ie8后开始支持通过CSS3属性box-sizing，让我们可以自由选择采用哪种盒子。 w3c标准盒模型--块级盒 width = content-width + padding-width + border-width height = content-height + padding-height + border-height IE盒子模型--块级盒 width = content-width height = content-height 行内盒 1.width、height不起作用，盒子高度由内容决定(font-size/line-height)决定 2.margin

fle布局语法篇（转载）

阅读更多关于 fle布局语法篇（转载）

本文章转载自阮一峰老师的博客，仅为学习所用，地址 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 布局。

CSS学习笔记--flex弹性布局

阅读更多关于 CSS学习笔记--flex弹性布局

阅读更多关于 flex布局

flex布局阮一峰：flex布局教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 注意点：任何一个容器都可以指定为flex布局行内元素也可以使用flex布局：display：inline-flex webkit内核的浏览器，必须加上-webkit前缀：display:-webkit-flex; ** 父元素设置flex布局后，子元素的float、clear、vertical-align属性将失效基本概念容器：flex容器 Flex项目：所有flex容器的子元素容器属性（6个） flex-direction属性：决定主轴的排列方向 row:默认值，主轴为水平方向，起点为左端 row-reverse: 主轴为水平方向，起点为右端 column:主轴为垂直方向，起点为上端 column-reverse: 主轴为垂直方向，起点为下端 flex-wrap属性：如果一条轴线放不下，如何换行 nowrap:默认值，不换行 wrap: 换行，第一行在上方 wrap-reverse：换行，第一行在下方 flex-flow属性：flex-direction属性和flex-wrap属性的简写形式 row nowrap : 默认值 justify-content属性：主轴上的对齐方式 flex-start: 左对齐 flex

flex布局（弹性布局）

阅读更多关于 flex布局（弹性布局）

1. 传统布局与 flex 布局比较　传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局　flex 弹性布局操作方便，布局极为简单，移动端应用很广泛 PC端浏览器支持较差 IE 11 或更低版本，不支持或仅部分支持 2. flex 布局原理　flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex 布局。当为父盒子设为 flex 布局之后，子元素的 float，clear 和 vertical-align 属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局　采用 Flex 布局的元素，称为 Flex 容器，简称为“容器”。它的所有子元素自动成为容器成员，成为 Flex 项目，简称“项目”。体验中 div 就是 flex 父容器体验中 span 就是子容器 flex 项目子容器可以横向排列，也可以纵向排列　总结 flex 布局原理：就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。来源： https://www.cnblogs.com/qtbb/p/11774222.html

ApiCloud框架

阅读更多关于 ApiCloud框架

一、通用底部菜单和顶部菜单布局 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>底部导航</title> <style> header{ background-color: #f2f2f2; } header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px; } header ul li.active{ display: block; } #footer{ background-color: #f2f2f2; } #footer ul li{ padding-top: 36px; padding

css3（2）

阅读更多关于 css3（2）

旋转： 2D: transform: rotate()——进行旋转，括号内部写旋转角度，默认顺时针旋转.允许负值，元素将进行逆时针旋转, translate()——从当前位置进行移动，括号内为x，y值。允许负值，将反方向移动 transform:translate(30px,30px)：向右30px，向下30px移动，原来位置保存, scale()——改变原始尺寸，按照倍数变化，括号内为width、height的倍数 transform:scale(2,4)：宽度变为2倍，高度变为4倍, skew()——水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度 transform:skew(30deg,0deg);将横向扭转30度的div，内部文字会跟随扭转 transform:skew(0deg,30deg);将纵向扭转30度的div，内部文字会跟随扭转 transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div，内部文字会跟随扭转. 3D: transform : rotateX()——沿水平X轴进行垂直的翻转，括号内写转动度数; rotateY()——沿垂直Y轴进行水平的翻转，括号内写转动度数; 2D与3D的区别 : 2D转换跟3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来 3D转换是相当于镜面效果的，进行了前后空间

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布局