flexcontainer

CSS3弹性伸缩布局简介 2009年，W3C提出了一种崭新的方案—- Flex布局 （即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局，所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点，让大家对神秘的flex布局熟悉起来。 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box { display : flex ; } 行内元素也可以使用 Flex 布局。 .box {

常用flex属性速查表 弹性盒子 设置弹性盒子： display: flex; 将元素设置为弹性盒容器 display: inline-flex; 将元素设置为弹性盒容器 注意：设置为flex布局之后，子元素的float、clear、vertical-align属性都会失效 基本概念： 容器 项目 主轴：默认水平方向，向右 主轴的起点 主轴的终点 交叉轴：默认垂直方向，向下 交叉轴的起点 交叉轴的终点 容器属性——添加弹性容器上 flex-direction属性：设置主轴的方向 flex-direction: row; /*默认值，设置主轴方向为水平方向，起点在左侧*/ flex-direction: row-reverse; /*设置主轴方向为水平方向，起点在右侧*/ flex-direction: column; /*设置主轴方向为垂直方向，起点在上方*/ flex-direction: column-reverse; /*设置主轴方向为垂直方向，起点在下方*/ justify-content属性：设置弹性子元素在主轴上的对齐方式 justify-content: flex-start; /*默认值，子元素位于弹性盒的开头*/ justify-content: flex-end; /*子元素位于弹性盒的结尾*/ justify-content: center; /

之前在写 《个人常用的水平居中方法》 这篇文章的时候，百分比问题涉及到了包含块（containing block）这个概念。 今天刷面试题的时候，又看到了containing block这个词，之前计算百分比考虑了几种情况（如那些属性值根据哪个元素计算的），但不知道所谓的‘哪个元素’就是包含块。系统的看了看MDN中的内容，感觉受益匪浅。大家可以移步去MDN看，我这篇仅仅是在原文基础上加了个小知识点——内容区域的解释。 原文 MDN布局和包含块 一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。在本文中，我们来过一遍确定包含块的所有因素。 当一个客户端代理（比如说浏览器）展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：内容区、内边距区、边框区、外边区 许多开发者认为一个元素的包含块就是他的父元素的内容区。但事实并非如此。 接下来让我们来看看，确定元素包含块的因素都有哪些。 包含块的影响 元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width , height , padding , margin ，绝对定位元素的偏移值 （比如 position 被设置为 absolute 或 fixed ），当我们对其赋予百分比值时

flex布局 任何一个容器都可以指定为flex布局 当父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex的元素，称为Flex容器（flex container）简称”容器“。 它的所有子元素自动成为容器成员，成为Flex项目（flex item）简称“项目” 启用flex布局：给标签加上样式：display:flex; 如果没有设置，是没有flex布局的！！！！！ 常见的父项属性： 1、flex-direction设置主轴方向 flex布局，分为主轴和侧轴方向也称行和列、x轴和y轴 默认主轴方向就是x方向，水平向右 默认侧轴方向就是y方向，水平向下 元素跟着主轴排列 属性值：row：默认，为水平方向,相当于float:left row-reverse：水平反方向，相当于float:right，即从右到左 column：垂直方向，即从上到下 column-reverse：垂直反方向，即从下到上 2、justify-content 设置主轴上的子元素排列方式 使用该属性之前一定要确定好主轴方向 属性值：flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右；如果主轴是Y轴，则从上到下 flex-end：从尾部开始排列，如果主轴是x轴，则子元素贴着右边

flex布局 flex布局指令详解 flex布局的优势 flex基本概念 flex属性详解 flex-direction justify-content align-items flex-wrap align-centent flex-flow flex布局指令详解 flex布局的优势 相较于传统的盒模型，使用 flex 不仅让代码拥有更清晰的结构，还大幅减少了布局代码的书写量。基于传统盒模型的布局，通常设置 display 和 position 以及 float 属性来完成布局，这样虽然也能实现大部分的布局样式，但其布局代码往往让人难以琢磨，可读性也很不友好。而基于flex的布局则完美的结局了这些问题，下面我们就一起来探究flex布局，你就能明白为什么flex布局为什么这么受欢迎了。 flex基本概念 flex 是 flex container 的缩写，称作 弹性盒模型 ， flex 正如其名，天生就很灵活，因此使用 flex 布局能够简单高效的完成各种布局样式。 使用 flex 布局，要设置元素的 display 为 flex ,或者 inline-flex ，设置完成后，其子元素自动成为容器元素(flex-item) flex属性详解 在flex容器上一共有两个轴，分别为主轴(main axis)和交叉轴(cross axis)，主轴既可以是水平方向也可以是垂直方向

在学习flex布局之前，我们是如何让如下四个盒子排在一列呢？我们也许会用浮动、定位等等。当我们使用的时候我们会觉得很麻烦，需要调间距、量距离等。然而学习了felx布局，我们可以轻松的解决这些问题。 1.什么是flex布局？ 2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 2.flex的基本语法 felx布局示意图： 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end， 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 （1）flex-direction属性决定主轴的方向（即项目的排列方向）。

flex布局简介 微信小程序页面布局方式采用的是 Flex 布局。 Flex 布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。 样式设置为 display:flex : 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器" 容器默认有两个轴：主轴(main axis)和侧轴(cross axis)。 主轴的开始位置为主轴起点(main start)，主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。 同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。详情见下图: flex布局的属性 1.flex-direction 主轴的方向使用 flex-direction 属性控制, 主轴 并不是一定是 从左到右 的，同理 侧轴 也不一定是 从上到下 ，它有4个可选值: row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿 2.justify