flex布局

Flex 是 Flexible Box 的缩写 ，意思是 ”弹性布局”，用来为盒子模型提供最大的灵活性。 设置flex布局后，子元素的float、clear 和vertical-align 属性将失效。 基本概念 使用flex布局的元素称作flex容器，简称“容器”。他所有的子元素都会自动成为容器成员，称Flex项目 （flex item）,简称“项目”。 该容器有两根轴：1.水平的主轴（main axis） 2.垂直的交叉轴（cross axis） 各个点的概念介绍：1.水平主轴的起始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end; 2.垂直交叉轴的起始位置叫做 cross start，结束位置叫做cross end; 3.主轴的长度叫做main size， 交叉轴的长度叫做 cross size 在容器上可以设置6个属性： 1. flex-direction 容器内部项目的排列向（默认横向排列） 2. flex-wrap 容器内项目换行方式 3. flex-flow 1和2 的简写 4. justify-content 项目在主轴上的对齐方式 5.align-items 项目在交叉轴上的对齐方式 6. align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。 flex-direction 1 .box {

原博地址： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 骰子实例： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html display：flex 1. flex-direction：决定主轴的方向，水平和垂直 row （默认值）：主轴为水平方向，起点在左端。 row-reverse ：主轴为水平方向，起点在右端。 column ：主轴为垂直方向，起点在上沿。 column-reverse ：主轴为垂直方向，起点在下沿。 2. flex-wrap：是否换行 nowrap（默认）：不换行 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方 3. flex-flow flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。 4. justify-content：文本元素对齐方式 flex-start （默认值）：左对齐 flex-end ：右对齐 center ： 居中 space-between ：两端对齐，项目之间的间隔都相等。 space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 5. align-items flex-start

上一篇文章 介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅 《Flex布局教程：语法篇》 。我的主要参考资料是 Landon Schropp 的文章和 Solved by Flexbox 。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到 codepen 查看Demo。 如果不加说明，本节的HTML模板一律如下。 < div class = " box " > < span class = " item " > </ span > </ div > 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 1.1 单项目 首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。 .box { display : flex ; } 设置项目的对齐方式，就能实现居中对齐和右对齐。 .box { display : flex ; justify-content : center ; } .box { display : flex ; justify-content : flex-end ; }

很久之前就用过flex布局，觉得很好用，但是由于兼容性，所以并没有经常用，因此在用flex布局的时候应该考虑其兼容性，flex对移动端的兼容性比较高。 flex布局是一个网页布局 一、兼容性如下 二、容器的属性 1.display:flex/inline-flex 2.flex-direction 决定主轴的方向（即项目的排列方向） flex - direction : row | row - reverse | column | column - reverse ; row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 3.flex-wrap 决定换不换行，默认不换行 flex - wrap : nowrap | wrap | wrap - reverse ; 4.flex-flow 是flex-direction和flex-wrap的简写方式 flex - flow : < flex - direction > || < flex - wrap >; 5.justify-content 决定了项目在主轴上的对齐方式 justify - content : flex - start | flex - end | center |

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box1{ display: flex; } .box2{ display: inline-flex; <span style="font-family: Arial, Helvetica, sans-serif;">/*</span><span style="font-family: Arial, Helvetica, sans-serif;">行内元素也可以使用Flex布局。*/</span> } .box3{ display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/ display: flex; } 注意，设为Flex布局以后，子元素的 float、clear和vertical-align 属性将失效。 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目

（前面是大概简介，后面为具体实例） 可参考此文章 一、flex布局简介 flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。 使用： 任何容器（行内元素可设置为display:inline-block）; 特点： 空间分布在行中进行，而非整体 二、grid布局简介 Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。 使用： 对父元素设置dispay：grid;grid-template-colums和grid-template-rows来设置几行几 列，然后对 子元素设置占据几行几列 特点： 二维网格结构，十分便于操作 基本概念： *container：网格容器，设置display:grid就将容器变成了网格容器 *item：网格项，指网格容器中每一个子元素 *line：网格线，网格之间的分界线 *track：网格轨道，两条相邻的网格线之间的空间（行或列） *cell：网格单元，每个小网格 *area：网格区域，四条网格线包围起来的区域 *fr：在自由空间进行分配的一个单位 三、实例操作 1.flex （1） 2.grid （1）grid-template-columns、grid

一、什么是flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 二、基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。 三、容器的属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow

样式绑定 <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> customStyle: { type: Object, default: function() { return { right: '50px', bottom: '50px', width: '40px', height: '40px', 'border-radius': '4px', 'line-height': '45px', background: '#e7eaf1' } } }, 2.Window pageXOffset 和 pageYOffset 属性 https://www.runoob.com/jsref/prop-win-pagexoffset.html (基于vue-element-admin backToTop组件) 3.Sass之&引用父选择器 https://www.iteye.com/blog/lixh1986-2428306 4.flex布局的几点 justify-content: space-around; align-items: flex-start; flex-direction: row; 5.Vue 拖拽组件 vuedraggable 和 vue

今天在写h5活动的时候，使用到了flex布局，在chrome浏览器手机模式下测试一切ok，然后使用真机(iphone 5c)时，就发现了各种问题? 在网上找了下flex布局的各种兼容写法，特此记录下 原文地址： 弹性布局各种坑爹兼容 display：flex的兼容写法 display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -weblit-flex; display: flex; 定义子元素换行flex-firection的兼容性写法 -webkit-box-orient: verical; -webkit-box-direction: normal; -moz-box-orient: verical; -moz-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; 用box-orient:horizontal+box-direction:normal/reverse可以达到flex-direction:row/row-reverse效果 用box-orient:vertical+box-direction:normal/reverse可以达到flex-direction:column

欢迎访问我的个人博客： http://www.xiaolongwu.cn 1. 前言 flex弹性盒，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素 拥有更恰当的排布行为，弹性盒属于 CSS 3 部分，IE9 以下不支持，现代浏览器指的就是 IE9 及以上的浏览器 2. flex的优势 举个例子：这里我们要实现一个功能，让一个dom元素水平垂直居中; 2.1 传统实现方式（1），居中元素的宽高已知 .box1{ position: relative; background: darkcyan; width: 800px; height: 300px; } .box1-son{ position: absolute; border: 1px solid seashell; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-100px,-100px); } <div class="box1"> <div class="box1-son">传统布局1</div> </div> 2.2 传统实现方式（2），居中元素的宽高未知 .box2{ position: relative; background: darkcyan; width: 800px; height: