弹性布局-flex

浅谈display:flex

display:flex 意思是弹性布局

首先flex的出现是为了解决哪些问题呢？

一、页面行排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

css部分

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

用display:flex布局，可以解决这两个缺点

刚吃的html部分不变，css部分

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

1:2分时

同样分为3份时

flex是所占的比例，这样的布局就方便很多。

二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex

html部分

css部分

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

原文地址：http://www.cnblogs.com/manman04/p/5704660.html

时间： 2024-09-30 21:29:43

弹性布局-flex的相关文章

弹性布局flex

前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作. 让一个盒子具有弹性布局的属性,要先给其加上样式display:flex:OK我们也会看到有写的是display:box/display:flexbox:其实他们只是不同时期的规范: 新规范:2013年最新版本规

从零开始学_JavaScript_系列（17）——CSS<4>（定位、遮罩、float、弹性布局flex）

部分可能不兼容低版本浏览器(比如IE) 部分图片来自网易云课堂,侵.私信.删 (60)定位 ①position ②值: static:默认,无定位 relative:相对定位,仍在文档流之中(其他的元素不变),参照物相对于原来的位置进行定位.会压在其他的元素上面.作用是为绝对定位元素提供参照物. absolute:绝对定位,脱离文档流(后续元素会在绝对定位元素的前序元素的后面),默认宽度是内容宽度,参照物是第一个定位的祖先/根元素(根元素是html元素),如果祖先没有定位元素,那么会导致其参照物

弹性布局Flex的基本语法

一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀二.Flex的两个基本概念 (1)容器(flex container

移动端弹性布局--flex

目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. 一. 初识flex 以前我给PC端网页进行布局时,我是基于盒子模型上,然后采用float浮动和position定位这2个主要属性,当时,我对flex布局并不了解.后来当我开始接触移动端项目时,我开始了解新的布局方式,这才知道flex弹性布局的存在. 我为什么会对flex布局有好感呢? 首先是因为以

响应式布局实现的几种方法 — 弹性布局

响应式布局实现的几种方法 - 弹性布局响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力.就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局. 弹性布局是一种十分方便的,只需要依赖于CSS样式的实现响应式布局的方式,也是K最多用到的一种实现响应式的方法.尤其是现在类似于某宝.某东一类的电商web站或者手机app的页面,利用弹性布局是都可以很轻松的实现的,下面就是本K用弹性布局copy的某动的手机应用的部

flex 实用的弹性布局

主要布局:  <div class="box">  <div class="content">11111</div> <div class="content">22222</div> <div class="content center">3333333</div> <div c

flex 弹性布局整理

flex布局(弹性布局) 1.容器具备的属性有: flex-dirction:(决定主轴的方向)(即项目排列方向) 取值:row/row-reverse/column/column-reverse/ flex-wrap:(如果一条轴线排不了,如何换行) 取值:nowrap(默认):不换行. wrap:换行,第一行在上方. wrap-reverse:换行,第一行在下方. flex-flow :(flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为ro

flex弹性布局

Css3的flex布局用法 Flex意为"弹性布局",英文flexible box的缩写,flex布局使css盒模型变得更加强大和灵活,flex布局主要用在webapp和移动端中使用,移动端flex布局,将使的布局变得异常简单. 任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局. .box{display:inline-flex;} Webkit内核的浏览器,必须加上-webkit前缀 .box{ display:-webkit;/*Safari*/display

flex弹性布局学习总结

一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,以下不再重复说明. 下图为flex的相关概念的示意图使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item).容器拥有两根隐形的轴,水平的主轴(main axis),和竖