css3 flex弹性布局详解

一、flexbox弹性盒子

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

二、基本概念

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

开启flex布局：只需在最外层容器设置display:flex;

采用flex布局称为flex容器，整个网页可看成一个flex容器，所有子容器自动生成容器成员称为flex项目。

容器默认存在两根轴：

水平的主轴（main axis）： Flex容器的主轴主要用来配置Flex项目，默认是水平方向（x轴正向）

垂直的交叉轴（cross axis）： 与主轴垂直的轴 ，称作侧轴

主轴的开始位置（与边框的交叉点）（main start）

结束位置叫做（main end）

交叉轴的开始位置叫做（cross start），结束位置叫做（cross end）

单个项目占据的主轴空间叫做（main size），占据的交叉轴空间叫做（cross size）

三、容器属性

1.父级属性

可以简单的理解为作用外层div。

flex-direction:调整主轴方向（默认为水平方向）。
justify-content:调整主轴对齐。
align-items:调整侧轴对齐（子元素可以使用align-self覆盖）。
flex-wrap:控制是否换行。
align-content:堆栈（由flex-wrap产生的独立行）对齐。
flex-flow:是flex-direction + flex-wrap的简写形式。

2.子级属性

可以简单的理解为作用内层div。

flex:是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配。
align-self:可覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于strech。
order:控制子项目的排列顺序，正序方式排序，从小到大。

四、代码+解释

    
    
    
    
    


    
1
        
11
        
12
    
    
2
    
3
    
4
    
5
    
6
    
7

五、运行结果

读者可适当放开注释，自行体验不同效果。

记录每一个学习瞬间