STAY HUNGRY , STAY FOOLISH.

求知若饥，虚心若愚。

| CSS        浏览:

Flex弹性盒布局

1.传统网页布局

传统网页布局的解决方案是基于盒状模型，依赖 display属性 + position属性 + float属性。使用的属性如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*-------下面是依次说到的属性---------*/
/*盒模型*/
padding:0
border:0
margin:0
width:0
height:0

/*display属性*/
display:inline|block|inline-block|none|inherit
/*position属性*/
position:static|relative|absloute|fixed|inherit
/*float属性*/
float:none|left|right|inherit

/*-------下面是常见的常见及解决方案---------*/
/*水平居中*/
#main{
  margin:0 auto
}
/*内边距和边框不增加其宽度*/
box-sizing:content-box|border-box|inherit
/*浏览器窗口比元素的宽度还要窄，出现滚动条*/
max-width:960px
/*清除浮动*/
clear:none|left|right|both|inherit

/*----下面是常见的布局类型，完整网页会运用其一种或多种--------*/
/* 
1.传统布局
2.相对绝对布局
3.浮动布局
4.百分比宽度布局
5.媒体查询 
*/

2.什么是Flex弹性盒布局？有什么意义？

1
2
3
display:flex;/*W3C 2012年第5次草案及以后的候选推荐标准*/
display:flexbox;/*W3C 2011年第2次草案提出，已过时*/
display:box;/*W3C 2009年第1次草案提出，已过时*/

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
没错，只需记住display:flex就是弹性盒布局，意义是能简单实现布局，如：垂直居中。

3.兼容性根本不是事

flex布局

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

4.Flex基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
flex
容器默认存在两根轴：主轴和交叉轴，
项目默认占据两个空间：主轴空间和交叉轴空间。

5.容器属性

容器属性一共有6个，分别是：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1）flex-direction属性
flex-direction属性决定项目的排列方向。

1
2
3
4
5
/**下图依次所对应的属性**/
flex-direction:row（左到右）
flex-direction:row-reverse（右到左）
flex-direction:column（上到下）
flex-direction:column-reverse（下到上）

flex-direction

2）flex-wrap属性
flex-wrap属性定义，如果一条轴线排不下，如何换行。

1
2
3
flex-wrap:nowrap（不换行）
flex-wrap:wrap（换行，从上到下）
flex-wrap:wrap-reverse（换行，从下到上）

flex-wrap

3）flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1
flex-flow: <flex-direction> || <flex-wrap>

4）justify-content属性
justify-content属性定义项目在主轴上的对齐方式。

1
2
3
4
5
6
/**下图依次所对应的属性**/
justify-content:flex-start（左对齐）
justify-content:flex-end（右对齐）
justify-content:center（居中）
justify-content:space-between（两端对齐，项目之间的间隔都相等）
justify-content:space-around（项目之间的间隔都相等）

justify-content

  1. align-items属性
    align-items属性定义项目在交叉轴上的对齐方式。
    1
    2
    3
    4
    5
    6
    /**下图依次所对应的属性**/
    align-items:flex-start（上对齐）
    align-items:flex-end（下对齐）
    align-items:center（居中）
    align-items:stretch（项目被拉伸以适应容器）
    align-items:baseline（项目的第一行文字的基线对齐）
    align-items

6）align-content属性
align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

1
2
3
4
5
6
/**下图依次所对应的属性**/
align-items:flex-start（上对齐）
align-items:flex-end（下对齐）
align-items:center（居中）
justify-content:space-between（两端对齐，项目之间的间隔都相等）
justify-content:space-around（项目之间的间隔都相等）

align-content

6.项目属性

项目属性一共有6个，分别是：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

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

1
order:<integer>

order

2）flex-grow属性
flex-grow属性定义项目的放大比例，默认为0。

1
flex-grow:<integer>

3）flex-shrink属性
flex-shrink属性定义项目的缩小比例，默认为1。

1
flex-shrink:<integer>

4）flex-basis属性
flex-basis属性定义项目占据的主轴空间。

1
flex-basis:60px

5）flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

1
flex:<flex-grow> || <flex-shrink> || <flex-basis>

6）align-self属性
align-self属性定义项目单独在交叉轴上的对齐方式。

1
2
3
4
5
6
/**下图依次所对应的属性**/
align-items:flex-start（上对齐）
align-items:flex-end（下对齐）
align-items:center（居中）
align-items:stretch（项目被拉伸以适应容器）
align-items:baseline（项目的第一行文字的基线对齐）

总结一下：
1.容器属性使用：
flex-flow决定方向和换行
justify-content决定主轴对齐方式
align-items决定单根轴线的交叉轴对齐方式
align-content决定多根轴线的交叉轴对齐方式
2.项目属性使用：
order决定排序顺序
flex决定项目的缩放比例
align-self决定单个的交叉轴对齐方式

剩下的就是要靠自己去实战了！