效果 内容；副轴终边对齐方式 1.父元素ul设置了flex,高度height: 500px;，也换行了，此时父元素的高度空间被分配为两行。 2.父元素ul设置，flex-flow: row wrap; align-items: flex-end;侧轴对齐方式为终 ...

Css3的flex布局用法 Flex意为“弹性布局”，英文flexible box的缩写，flex布局使css盒模型变得更加强大和灵活，flex布局主要用在webapp和移动端中使用，移动端flex布局，将使的布局变得异常简单。 任何一个容器都可以指定为flex布局 ...

一、怪异盒模型 怪异盒模型的属性是box-sizing，他有两个属性值： 1、content-box 　　这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 　　简而言之就是，一般的盒子都是属于这种，最显著的特点 ...

1、什么是 flex 布局 Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。 2、基本概念 2.1、什么是 flex 容器（flex container）？ 采用 flex 布局的元素，称为 flex 容器 ...

前置 flex大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。 这里的flex属性如flex：1就给容器内部项目的设置属性。 示例 解释 这里的wrap就是容器，item我们称作项目。 我们还需要知道flex属性是flex-grow, flex ...

上一篇博客《CSS3弹性伸缩布局（一）——box布局》介绍了旧版本的box布局，而这篇博客将主要介绍最新版本的flex布局的基础知识。 新版本简介 新版本的Flexbox模型是2012年9月提出的工作草案，这个草案是由W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容 ...

CSS3弹性伸缩布局简介 2009年，W3C提出了一种崭新的方案—-Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种 ...

flex是flex-grow、flex-shrink和flex-basis的缩写。 flex: 1 表示的是flex: 0 1 auto 即不放大、按比例缩小。 flex: n 表示的是flex-grow为n，即按n的比例放大。其余两值为默认值1、0%。 flex: n1 n2 表示 ...