http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
浏览器私有属性： -moz -o -webkit -ms
display: flex inline-flex
flex-direction: row row-reverse column column-reverse
flex-wrap: nowrap wrap wrap-reverse
flex-flow: flex-direction和flex-wrap的结合，例如 flex-flow row nowrap
justify-content: 定义伸缩项目在主轴线的对齐方式 flex-start flex-end center space-between space-around
align-items: 定义伸缩项目在交叉轴的对齐方式 flex-start flex-end center baseline stretch
align-content: 定义伸缩项目换行后在交叉轴的对齐方式 stretch flex-start flex-end center space-between space-around
order: 排序，默认为0，数字越小越排前面。
flex-grow: 放大比例，默认为0，伸缩是按比例来算的，假设一共3个元素，第一个和第三个是1，第二个是2，那么第二个的伸缩比例是其他的两倍
flex-shrink: 收缩比例，其他同上
flex-basis: 伸缩项目的基准值，默认值auto，还有length
flex: 等同于 flex-grow flex-shrink flex-basis
align-self: 该元素在交叉轴的位置(如果交叉轴为垂直的话，只有不设置高度，才能看到streach效果,如果交叉轴为水平的话，只有不设置宽度，才能看到streach效果。总之宽度和高度优先于stretch)
分享到：
相关推荐
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。 这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
### Flex布局基础知识点 #### Flex布局介绍 Flex布局，全称CSS Flexible Box Layout Module，简称Flexbox，是CSS3中一种新的布局模式。这种布局模式专门用于更高效地对齐、分布和排序容器中的项目，即使它们的大小...
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex布局在Web开发中是一种非常重要的布局模式，它允许元素在容器中灵活地调整大小和位置，以适应不同屏幕尺寸和设备。在Flex布局发生变化时，例如元素的增删、大小调整或排列顺序改变，我们可能希望添加动画效果来...
在这个"微信小程序+Flex布局示例源代码"中，我们将深入探讨Flex布局在微信小程序中的应用。 Flex布局，全称为Flexible Box布局，是CSS3中的一种新的布局模式，旨在解决传统盒模型在处理复杂或响应式布局时的困难。...
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
在现代Web开发中，Flex布局（Flexible Box Layout）已经成为创建响应式、动态和灵活的用户界面的首选方法，尤其在移动设备上。本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并...
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
在微信小程序中，开发者可以利用CSS布局方式之一的Flex布局来实现复杂的页面设计，提高用户体验。本教程将深入探讨微信小程序中的Flex布局。 一、Flex布局基础 1. Flex容器：在CSS中，一个元素如果设置了`display:...
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来对网页或应用程序中的容器内的子元素进行排列、对齐和分配空间。这种布局模式在响应式设计、...
在网页设计领域，Flex布局（Flexible Box Layout，也称为CSS3 Flexbox）是一种强大的工具，它使得构建响应式、动态调整的布局变得简单易行。本教程将带你深入理解Flex布局，并通过实例演示如何利用HTML和CSS搭建一个...
在深入探讨Flex布局中关于组件大小的管理时，我们首先需要理解Flex布局的基本概念及其如何影响组件的尺寸。Flex布局是一种用于网页布局的强大工具，它能够有效地处理不同屏幕尺寸下的响应式设计，使得元素能够在容器...
Flex布局，全称为“Flexible Box”，也称作柔性盒布局，是CSS3中的一种布局模式，旨在提供一种更加有效和灵活的方式来控制Web页面元素的排列和对齐方式。这种布局方式特别适合处理需要动态调整的界面，比如响应式...
弹性因子（flex-grow, flex-shrink, flex-basis）在微信小程序的Flex布局中，每个伸缩项目都可以通过flex属性来指定其弹性因子，它是一个简写属性，可以设置三个值：flex-grow, flex-shrink, 和 flex-basis。...
flex布局实现顶部导航，底部导航固定，内容区内容高度超过可展示区域时出现滚动条，内容高度不足时铺满屏幕。
此时，Flex布局（Flexible Box布局，简称flex布局）应运而生，它提供了一种更为灵活、强大且易于控制的盒状模型布局方式。本教程将深入探讨携程网首页如何利用Flex布局实现，以及Flex布局的基本概念和使用技巧。 ...
微信小程序开发中的Flex布局是一种灵活的布局方式，其核心是通过设置容器的display属性为flex或inline-flex来启用。Flex布局允许容器内的元素能够以灵活的方式进行排列，适应不同屏幕尺寸和分辨率。在微信小程序中，...
Flex布局是一种现代网页和应用程序设计中的重要布局模式，它允许开发者更加灵活地调整元素在容器内的分布和排列。本笔记将深入探讨Flex布局的核心概念、属性及其用法。 1. Flex容器（flex-container） Flex容器是...