flex布局

首先了解flex布局的基本属性

1.flex布局父级常见属性

1.flex-direction:设置主轴方向

2.justify-content:设置主轴上的子元素的排列方式

3.flex-wrap:设置子元素是否换行

4.algin-content:设置侧轴方向的子元素的排列方式(多行)

5.algin-items:设置侧轴方向上的子元素的排列方式(单行)

6.flex-flow:复合属性.相当于同时设置了flex-direction和flex-wrap

7.拓展:algin-content和algin-items的区别

8.flexf父项常见属性总结

2.flex布局子项常见属性

1.flex属性:属性分配额

2.flex:数值,数值越大,分配的越多

3.order:属性定义项目(子项)的排列顺序

首先了解flex布局的基本属性

flex是flexible Box 的缩写,意为弹性布局

弹性布局,使网页布局更加简单,灵活,避免浮动脱标的问题

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

任何容器都可以指定为flex布局

 注意:当我们给父盒子添加flex布局以后,子元素的float(浮动),clear和vertical-algin属性会失效

总结:flex布局原理

给父盒子添加flex属性,来控制子盒子的位置和排列方试.

flex的基本属性

flex布局父级常见属性

 1.flex-direction:设置主轴的方向

主轴和侧轴是会发生变化的,就看flex-direction给谁设置主轴,子元素跟着主轴来排列的

从左到右排列(默认的主轴是X轴,row.  那么Y轴就是侧轴 我们的子元素是跟着主轴来进行排列的..)
 flex-direction:row;
从上到下排列 (把主轴设置为Y轴,侧轴就是X轴.)
flex-direction:column;
翻转 指沿着X轴翻转从左到右排列
flex-direction:row-revrese;
沿着Y轴翻转从下往上排列
flex-direction:column-reverse;

2.justify-content :设置主轴上的子元素的排列方式

注意:使用这个属性的时候,要确定好主轴是哪一个

justify-content:设置主轴上的子元素的排列方式

默认从头部开始排列,主轴是X轴,从左到右
justify-content:flex-start;

从尾部开始排列
justify-content:flex-end;

子元素在主轴中间对齐
justify-content:center;

平分剩余空间
justify-content:space-around;

先贴两边,再平分剩余空间(重要)
justify-content:space-evenly;

沿主轴排序,盒子与容器之间距离相等
justify-content:space-evenly;

3.flex-wrap:设置子元素是否换行

 注意:一般flex布局中,子元素默认不换行,在一条轴线上

默认属性不换行 nowrap
flex-wrap:nowrap;

换行 wrap
flex-wrap:wrap;

 4.algin-content:设置侧轴上的子元素排列方式(多行)

注意:只能子项出现换行的情况(多行),对单项是无效的

默认侧轴的头部开始排列
algin-content:flex-start;

在侧轴的尾部开始排列
algin-content:flex-end;

在侧轴的中间显示
algin-content:conter;

子项在侧轴平分空间
algin-content:space-around;

子项先贴边再平分
algin-content:space-between;

侧轴多行平均分配
algin-content:space-evenly;

stretch  设置子项高度平分父元素高度

 5.algin-items:设置侧轴上的子元素排列方式(单行)

注意:该属性是控制子项在侧轴上的排列方式,在子项为单项的时候使用

 

从上到下
flex-start

从下到上
flex-end

挤在一起居中
algin-items:content;

拉伸(默认值)
stretch

注意:stretch使用时子盒子不要设置高度

6.flex-flow:复合属性 是flex-direction和flex-wrap的和写

设置主轴方向he是否换行(列)
flex-flow:column wrap;

7.拓展algiin-content和algin-items的区别

algin-items 适用于单行情况下,只有上对齐,下对齐,居中和拉伸

algin-conetent  适用于换行(多行) 的情况下,(单行情况无效),可以设置上对齐,下对齐,居中,拉伸以及平均分配剩余空间等属性值

总结:单行找:algin-items    多行找:algin-content

8.flex父项常见属性总结 

flex-disection:设置主轴方向

justify-content:设置主轴上子元素排列方式

flex-wrap :设置子元素是否换行

algin-items :设置侧轴上子元素排列方式(单行)

algin-content:设置侧轴子元素排列方式(多行)

flex-flow :复合属性,相当于同时设置了fx-direction和flex-wrap

2.flex布局子项常见属性

1.flex属性:属性分配额

flex属性定义子项目分配剩余空间,用flex来表示占多少份数(常用于圣杯布局)

flex:数值越大,分配的越多

 2.flex:数值,数值越大,分配的越多

设置子项的某一个

div span:nth-child(n+2) {
 algin-self:flex-end;
}

3.order属性定义项目(子项)的排列顺序

数值越小,排列越靠前,默认是0

  div span:nth-child(2) {
  order:-1;
  }