CSS3 box-flex 弹性盒子布局

本文将从css3 box-flex的属性来讲解弹性布局

所有demo的演示地址https://css-tricks.com/snippets/css/a-guide-to-flexbox/

利用弹性布局五大金刚进行布局的的在线显示

https://xluos.github.io/demo/flexbox/

入门必备 

实现弹性布局必备

第一步：一般的布局首先html代码设置嵌套关系（如果更加复杂就在子div中继续嵌套）

<div id="main">
        <div style="background-color:coral;">A</div>
        <div style="background-color:lightblue;">B</div>
        <div style="background-color:khaki;">C</div>
</div>

 第二步：对于.main父级盒子设置：display:flex   注意不同的浏览器需要兼容前缀如下

dispaly:flex;
display:-webkit-flex;
display:-ms-flex;
display:-moz-flex;
display:-o-flex;

第三步：设置布局方式（在父盒子中设置）

次序等级	属性	作用盒子	描述
1.***	flex-direction	父盒子	指定了弹性容器中子元素的排列方式。
2.1***	justify-content	父盒子	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
2.2***	align-items	父盒子	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
3.1***	flex-wrap	父盒子	设置弹性盒子的子元素超出父容器时是否换行。
3.2***	align-content	父盒子	修改 flex-wrap 属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐
---	flex-flow	父盒子	flex-direction 和 flex-wrap 的简写
4.1	order	子盒子	设置弹性盒子的子元素排列顺序。
4.2	align-self	子盒子	在弹性子元素上使用。覆盖容器的 align-items 属性。 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。。
4.2	flex	子盒子	设置弹性盒子的子元素如何分配空间。

常用的5个属性（justify-content:center;align-items:center）垂直水平居中 

CSS3 弹性盒子属性

浮动布局诞生时只是为了图文快排，并不是为了块状布局，flex-box是专门为块级布局而诞生的

display:flex和flex-direction

display:flex;指定当前盒子为弹性盒子

flex-direction：改变主轴的方向//写在当前盒子中而不是子盒子中

row:       X轴 从左向右

row-reverse:       X轴 从右向左

column:       Y轴 从上向下

column-reverse:    Y轴 从下向上

值	描述	实例
row	默认值。灵活的项目将水平显示，正如一个行一样。	尝试一下 »
row-reverse	与 row 相同，但是以相反的顺序。	尝试一下 »
column	灵活的项目将垂直显示，正如一个列一样。	尝试一下 »
column-reverse	与 column 相同，但是以相反的顺序。	尝试一下 »
initial	设置该属性为它的默认值。请参阅 initial。	尝试一下 »
inherit	从父元素继承该属性。请参阅 inherit。

flex-wrap 伸缩容器

这里所谓的拆行换行，指的是div的总长度，与子div内部无直接关系

属性值

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

 

flex-flow ：flex-direction和flex-wrap的缩写方式

 flex-flow：flex-direction||flex-wrap

order：（针对子盒子）设置弹性盒对象元素的顺序

.a1 {order:2;}
			
			.a2 {order:1;}
			.a3 {order:3;}

 

justify-content、aign-items和align-self

justify-content（针对父盒子）

  伸缩容器---在X轴对齐方式

值	描述	测试
flex-start	默认值。项目位于容器的开头。左对齐	测试 »
flex-end	项目位于容器的结尾。右对齐	测试 »
center	项目位于容器的中心。居中	测试 »
space-between	项目位于各行之间留有空白的容器内。 X轴上均匀分布      只限于子盒子之间	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。 Y轴上均匀分布   包括子盒子之间和父盒子两边	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

aign-items （针对父盒子）

伸缩容器  控制伸缩项在Y轴对齐方式

值	描述	测试
stretch	默认。 拉伸元件以适应容器。	测试 »
center	中心元素在容器内。	测试 »
flex-start	位置元素在容器的开头。	测试 »
flex-end	位置元素在容器的末端。	测试 »
baseline	位置元素在容器的基线。	测试 »
initial	设置为默认值。请参阅 initial。	测试 »
inherit	从其父元素继承此属性。请参阅 inherit。

align-self 伸缩项（针对子盒子） 

 控制指定伸缩项在Y轴的展现方式  只有设置了父盒子的Y轴对齐方式 align-items之后才会生效

auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。	测试 »
stretch	元素被拉伸以适应容器。当其子盒子没有设置固定高度才有效	测试 »
center	元素位于容器的中心。	测试 »
flex-start	元素位于容器的开头。	测试 »
flex-end	元素位于容器的结尾。	测试 »
baseline	元素位于容器的基线上。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

 

align-content（针对父盒子）

 

align-content：控制伸缩项所组成的行列（伸缩行列）在Y轴的展现方式，只有一行或列不生效

 

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。	测试 »
center	项目位于容器的中心。	测试 »
flex-start	项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

 

 flex-grow 、flex-shrink、basis

flex-grow

控制伸缩项在伸缩行的伸展程度

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

 

flex-shrink （针对子盒子）

属性：用于设置或检索弹性盒的收缩比率。针对Y轴方向，没有设置高的情况下有效。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。flex-shrink: 3;表示占据1/3
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

 flex-basis

 

属性值

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

 flex