Flex语法教程

---

title: Flex语法教程
date: 2017-07-25 22:51:34
tags: css
categories: 教程
author: "JiaWei"

---

网页布局（layout）是 CSS 的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1. 什么是Flex

Flex是Flexible Box的缩写，意为"弹性芾局”，用来为盒状模型提供最大的炅活性。
任何一个容器都可以指定为Flex布局。任何一个容器都可以指定为Flex布局。
Webkit内核的浏览器，必须加上-webkit前缀。
、div{ display:flex } span{ displayiflex } p{ -webkit-display:flex } '

2. 属性值

容器的属性 :
1. flex-direction : row | row-reverse | column | column-reverse;
2. flex-wrap : nowrap | wrap | wrap-reverse;
3 flex-flow : flex-direction | | flex-wrap (属性简写）
4. justify-content : flex-start | flex-end | center | space-between | space-around;
5. align-items : flex-start | flex-end | center | baseline | stretch;
6. align-conten : flex-start | flex-end | center | space-between | space-around | stretch;

3. 项目(子元素)的属性 :

1. order : number (属性定义项目的排列顺序。数值越小，排列越靠前，默认为0)

 2.  flex-grow : number (定义项目的放大比例，默认为0 ,即如果存在剰余空间，也不放大。1为放大,2为放大 两倍〉
 3. flex-shrink : number (定义了项目的缩小比例，默认为1 ,即如果空间不足，该项目将缩小。0为不缩小）
 4. flex-basis : auto|px (属性定义了在分配多余空间之前，项目占据的主轴空间（main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。〉
 5. flex : auto| none (flex-grow, flex-shrink 和 flex-basis的简写,auto (1 1 auto)和 none (0 0 auto)0 ) align-self : auto | flex-start | flex-end | center | baseline | stretch;
(项目可以单独设置这个属性覆盖align-itmes的值,auto表示继承父元素的align-items属性，如果没有父元素，则等同于stretch）

4. 汇总

5. 参考文档 阮一蜂老师