Flex学习笔记

一

盒子模型已经不适用于某些特殊的布局，

PS*dispaly规定元素应该生成的框的类型
.Class_{

    dispaly: inline;//将元素指定为行内元素;
    dispaly: list-item;//将元素指定为列表显示;
    dispaly: flex;//弹性布局;

}

flex弹性布局为盒子模型提供最大的灵活性，所有容器都可以指定为flex弹性布局；

//行内元素弹性布局

dispaly: inline-flex;

设为弹性布局后子元素的float，clear，vertical-align属性都将会消失。

PS****

float: right;//右浮动；即使是块元素也可以使之浮动显示；

clear: left;//在左侧不允许浮动元素。
clear: right;//在右侧不允许浮动元素。
clear: both;//在左右两侧均不允许浮动元素。
clear: none;//默认值。允许浮动元素出现在两侧。
clear: inherit;//规定应该从父元素继承 clear 属性的值。

vertical-align: 

 

vertical-align：text-top;//定义vertical-align属性的元素顶端与父元素的字体顶端对齐;
vertical-align：middle;//行内元素居中对齐;

二

容器设置为flex布局，容器可视为被主轴(横向)和交叉轴(纵向)分割

三

flex-direction：column;
flex-wrap: wrap;                //默认下flex布局元素都在一条轴线上，使用flex-wrap可以换行；
flex-flow: column nowrap;       //他是flex-direction和flex-wrap结合；
justify-content;                //定义元素在主轴方向上的对齐方式：居中/左对齐/右对齐。。。
align-items;                    //定义元素在交叉轴上的对齐方式
align-content;                  //定义存在多根轴线时的对齐方式；

 

flex-direction:

flex-direction: column;//纵向展示，自顶开始,向下
flex-direction: column-reverse;//纵向展示，自底开始,向上
flex-direction: row;//横向展示，自左开始,向右
flex-direction: row-reverse;//横向展示，自右开始，向左

四

//下列属性在已经定义为flex布局的容器的子项目中定义，用于对子项目进行
//排序，放大，缩小，自定义等等操作。
order
flex-grow
flex-shrink
flex-basis
flex
align-self

原文地址