flex布局原理
flex是flexible Box的缩写,意为“弹性布局”,用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局。(在flex下众生平等)
- 在使用flex布局之后,子元素的float(浮动),clear(清除浮动)和vertical-align属性将失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素,称为flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为flex项目(flex item)简称“项目”。
总结:flex布局就是通过给父盒子添加flex属性,来控制子盒子的位子和排列方式。
重点=重点=重点:给父盒子添加flex属性。
flex布局常见的属性
flex父级添加的属性:
- flex-direction:设置主轴的方向。
flex-direction:决定主轴的方向
注意:主轴和侧轴是会发生变化的,就看flex-direction设置谁为主轴,剩下的为侧轴,而且我们的子元素是根据主轴来排列的。
属性:
row:从左到右(默认)
row-reverse:从右到左
column:从上到下
column-reverse:从下到上
- justify-content设置主轴上的子元素排列方式。
justify-content设置主轴上的子元素排列方式
属性:
flex-start:从头部开始,如果主轴是X,则从左到右(默认)
flex-end:从尾部开始排列
center:在主轴居中对齐(如果主轴是X轴则水平居中)
space-around:平分剩余空间
space-between:先两边贴边,在平分剩余空间(重点)
- flex-wrap:设置子元素是否换行。
flex布局中是默认不换行的。如果装不开,会缩小子元素的宽度,放到父元素里面。
属性:
nowrap:(默认)不换行
wrap:换行
- align-content:设置侧轴上的子元素的排列方式(多行)。
设置子项在侧轴上的排列方式,并且只能使用于子项出现换行的情况(多行),在单行中是不能使用的。
属性:
flex-start:在侧轴的头部开始排列(默认)
flex-end:在侧轴的尾部开始排列
center:在侧轴中间显示
space-around:子项在侧轴平分剩余空间
space-between:子项在侧轴先分布在两头,在平分剩余空间
stretch:设置子项元素高度平分父元素高度
- align-items:设置侧轴上的子元素排列方式(单行)。
该属性是控制子项在侧轴上的排列方式,在子项为单项的时候使用。
属性:
flex-start:从上到下(默认)
flex-end:从下到上
center:挤在一起居中(垂直居中)
stretch:拉伸
- flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap。
flex-flow属性就是flex-direction和flex-wrap属性的复合属性
flex-flow:row warp;(沿着Y轴换行)
flex布局中子项常见属性
-
flex属性定义子项目分配剩余空间,用flex来表示占多少份数。(重点)
.item{
flex:<数字>/default 0/
} -
align-self:控制子项自己在侧轴上的排列方式
-
order:属性定义项目的排列顺序(数值越小,排列越靠前,默认为0)注意:和z-index不一样。