flex布局
1.在不使用浮动和框架的前提下实现元素的排列。
2.代替浮动使布局更加方便
3.对齐方式包括了水平方向与垂直方向
4.弹性项目可通过CSS重新排序
创建方式
添加属性 dispaly:flex;
模板样式
flex布局存在两根轴:水平方向的称为主轴(main axis) ;垂直方向的称为交叉轴(cross axis).
主轴的开始位置叫做main start,结束位置叫做main end.
交叉轴的开始位置叫 cross start,结束位置叫作cross end.
flex布局的属性介绍与演示
1.flex-direction决定主轴的方向(即项目的排列方向).
flex-direction:row;
此为默认值即横向排列。
**flex-direction: column;**纵向排列
flex-direction: row-reverse;右对齐
flex-direction: column-reverse;起点在下沿。
flex-wrap属性用于当一条轴线上项目排不下时,如何换行。
1.flex-wrap: nowrap ;默认值(不换行)
2.flex-wrap: wrap;换行第一行在上面
3.flex-wrap: wrap-reverse;换行,第一行在下方。
** flex-flow**
flex-flow是flex-direction属性和flex-wrap属性的简写形式。
姑在这不多做叙述。具体属性可参照上面、
flex-basis
flex-basis属性定义项目占据的主轴空间
效果与with属性一样。
** justify-content属性**
justify-content属性定义的是内容在主轴上的对齐方式
justify-content: flex-start;是其初始值即左对齐
justify-content: flex-end;为右对齐
justify-content: center;为居中对齐
justify-content: space-around;使项目两侧的间隔相等
justify-content: space-between;使项目与项目之间的间隔相等
justify-content: space-evenly;使元素均匀排列
align-items属性
align-items属性定义项目在交叉轴上的对齐方式
**align-items: stretch;**默认值
align-items: flex-start;交叉轴的起点对齐。
align-items: flex-end;
交叉轴的终点对齐
**align-items: center;**交叉轴的中点对齐
**align-items: baseline;**与项目的第一行文字的基线对齐
align-content属性
用于多根轴线的对齐方式。如果是当单轴线时则不起作用。
**align-content: flex-start;**与交叉轴的起点对齐
align-content: flex-end;与交叉轴的终点对齐
align-content: center;与交叉轴中点对齐。
align-content: space-between;与交叉轴的两端对齐
**align-content: space-around;**使每根轴线之间的间隔相等
align-self属性
对于单个项目进行设置。除去auto属性以外其余属性与align-items属性完全一致。
align-self: flex-end;使单个项目位于底部
align-self: center; 使单个项目居中
**align-self: flex-start;**使单个项目位于顶部
order属性
order属性用于定义项目的排列顺序。值越小,顺位越靠前。