伸缩盒布局

display:flex(注意:所有相关属性都需要加-webkit-前缀)

#website ul:first-child {    display:-webkit-box;    box-pack:justify;    -webkit-box-pack: justify;

display:flex;    display:-webkit-flex;    justify-content: space-between;    -webkit-justify-content: space-between;}

对于支持flex的布局,绿色代码会进行重置,最终显示绿色代码 效果;对于不支持flex的浏览器,执行蓝色代码,绿色代码被忽略,最终显示 蓝色代码效果。

注意:li中要加上clearfix类,清除 垂直方向外边距重合。(不支持flex布局的浏览器,li设置的margin-top无效)

伸缩盒布局堪称布局神器,有过3次演变历史:  09:box  11:flexbox  12:flexbox基本所有浏览器都支持,但是似乎已经淘汰。flex是目前最新的属性。

  

时间: 2024-11-09 04:21:46

伸缩盒布局的相关文章

Flex布局(伸缩盒布局)

Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型.由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式. 浏览器兼容性 作为非常现实的开发者,是否对一个新技术进行关注,首先要考虑它的浏览器兼容性如何.我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的. 可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms-和-we

深入了解 Flexbox 伸缩盒模型

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步.如果你想知道它是什么并是如何工作的,不妨仔细了解下吧! 为什么需要伸缩布局盒(Flexbox)? 作者长期以来使用表格.浮动.行内块元素和其他 CSS 属性来布局网站内容.然而,这些并不是为复杂的页面和网页应用而设计的.不管是简单的垂直居中,还是灵活的网格布局都很难靠一己

【转】深入了解 Flexbox 伸缩盒模型

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步.如果你想知道它是什么并是如何工作的,不妨仔细了解下吧! 为什么需要伸缩布局盒(Flexbox)? 作者长期以来使用表格.浮动.行内块元素和其他 CSS 属性来布局网站内容.然而,这些并不是为复杂的页面和网页应用而设计的.不管是简单的垂直居中,还是灵活的网格布局都很难靠一己

第29章 CSS伸缩弹性布局(上)

第 29章 CSS3弹性伸缩布局[上]学习要点:1.布局简介2.旧版本 本章主要探讨 HTML5中 CSS3提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解.一.布局简介CSS3提供一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box).用来提供一个更加有效的方式实现响应式布局.但是用于这个布局方式还处于 W3C的草案阶段,并且它还分为旧版本.新版本以及混合过渡版本三种不同的编码方式.在发展中,可能还有各种改动,浏览器的兼容性还存在问题.所以,本节课

CCS3 伸缩盒模型(最新)

CSS3伸缩盒对使用响应式布局的网站的开发带来了很好的实现方式.它可以在不使用浮动(float)和定位(position)的情况下实现块级(block)元素的水平排列.并且可以 把父元素的宽度按照比例分配子元素,闲话不多少直接看例子. 1.要实现伸缩盒模式必须给父元素设置:display:flex (老版本display:box 需要加对应的浏览器前缀),实现伸缩盒模式的显示方式. 2.通过设置子元素的flex-grow属性来分配比例 1 <div id="parent">

CSS3伸缩盒Flexible Box

这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制 2)如果有多列,要让所有列的高度一样,以前的话需要用各种计算或用子元素撑高等 3)上下居中,如果是在以前,那么用line-height或top绝对定位等计算 4)表单布局的时候,经常是左边和右边在一行上,以往是设置

Webkit Flex伸缩盒模型属性备忘

一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. 由多个伸缩项目组成其具体的布局方式. 是为了呈现复杂的应用与页面而设计出来的. display:-webkit-flex; -webkit-flex: none | [flex-grow flex-shrink || flex-basis] | initial | auto none 在任何情况都

L6.Flexbox 伸缩盒模型

http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/ 1 Introduction CCS2.1中规定了四种布局模式: block layout, designed for laying out documents inline layout, designed for laying out text table layout, designed for laying out 2D data in a tabular format positi

CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南

在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块,用于实现容器里项目的对齐.方向.排序(即使在项目大小位置.动态生成的情况).flex容器最大的特性在于,能够修改子元素的宽度和高度,以满足在不同尺寸屏幕下的如意分布. 许多设计人员.开发人员发现flexbox布局方式使用简单,定位元素更加简单.复杂的布局更容易用较少的代码实现,大大地简化了开