目录
css弹性盒子flex 布局什么是flex常见父项属性概念与案例主轴与侧轴flex-direction设置主轴的方向justify-content 设置主轴上的子元素排列方式flex-wrap 设置子元素是否换行align-items 设置侧轴上的子元素排列方式(单行)align-content 设置侧轴上的子元素(多行)flex-flow 复合属性flex布局子项常见属性flex(重要)align-selfordercss弹性盒子flex 布局
什么是flex
flex是flexible Box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为flex布局,不仅是div这种行级元素,还有span这种块级元素,都可以指定为flex布局。
当我们为父盒子指定为flex布局以后,子元素的float、clear(清除浮动)和vertical-align属性将失效伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素,称为Flex容器,简称容器,它所有的子元素自动成为容器成员,称为flex项目
子元素可以横向排列也可以纵向排列
原理:就是通过给父盒子添加flex属性,来控制盒子的位置和排列方式
常见父项属性
以下六个属性是对父元素设置的
flex-dierction
:设置主轴的方向justify-content
:设置主轴上的子元素的排列方式flex-warp
:设置子元素是否换行align-content
:设置侧轴上的子元素的排列方式(多行)align-items
:设置侧轴上的子元素排列方式(单行)flex-flow
:复合属性,相当于同事设置了flex-direction和flex-wrap
概念与案例
主轴与侧轴
在flex布局中,分主轴和侧轴两个方向,同样的叫法有行和列,x轴和y轴
默认主轴方向就是x轴方向,水平向右默认侧轴方向就是y轴方向,水平向下
flex-direction设置主轴的方向
注意:主轴和侧轴是会变化的,看flex-direction设置谁为主轴,剩下的就是侧轴,而我们的子元素就是跟着主轴来排列的。
reverse(翻转的意思,不是重点)
justify-content 设置主轴上的子元素排列方式
控制子元素是通过父元素控制的
justify-content
属性定义了项目(子元素)在主轴上的对齐方式
使用该属性前要确定好主轴是哪个
flex-wrap 设置子元素是否换行
默认情况下,子元素都排列在一条线上(也就是主轴线上),也就是不换行,无论是否超过父元素的大小,如果超出,就会修改子元素的大小,flex-wrap属性定义flex不居中子元素如何换行
align-items 设置侧轴上的子元素排列方式(单行)
当我们要设置子元素在父元素中水平居中垂直居中时,不仅使用justify-content
让其在主轴方向居中,还要设置在侧轴上居中,这样就可以实现水平和垂直居中
而align-items
就是设置子元素在侧轴上的排列方式**(单行【单行的意思就是与上面的flex-wrap一样,当设置flex-warp为换行后,侧轴上就有多行元素,那么仅仅设置align-items是将其他行都当做第一行来显示效果】)**
如下图就是拉伸效果,意思就是沿着侧轴方向铺满整个父元素,下面是 因为有外边距,所以没有全部铺满
align-content 设置侧轴上的子元素(多行)
一般情况下,使用了flex-warp给子元素换行后,那么在侧轴上的子元素排列方式使用该属性设置。而没有换行的情况下,使用align-items。如果单行则使用该属性无效
总结:单行用align-items 多行(也就是使用了flex-wrap)使用align-content
flex-flow 复合属性
flex-flow属性是flex-direction 和 flex-warp的复合属性
例如:flex-flow:row wrap 表示主轴是行,并且换行
flex布局子项常见属性
flex 子项目占的份数align-self 控制子项自己在侧轴的排列方式order 定义子项的排列顺序(前后顺序)flex(重要)
作用:定义子项目分配剩余空间,用flex表示占多少份数
.item{flex:<number>;}
案例:
<style>.content{display: flex;/*设置为弹性盒子*/justify-content: space-between;/*子元素分局两侧*/}.item{height: 50px;margin: 5px;width:50px;}.center{flex:1;/* 表示占剩余空间的几份 */}div{border: 1px solid #c3c3c3;}</style><div class="content"><div class="item"></div><div class="item center"></div><div class="item"></div></div>
这段代码的意思就是父容器是flex盒子,子容器按照主轴方向排列,排列方式为分居两侧,剩余空间由其他元素平分,而当我们设置中间子容器为flex:1 表示中间盒子自己独占剩余空间,如果设置为flex:2效果不变,因为设置为2的意思就是将剩余空间拆分为2份,你自己占两份。如果我们不给子元素指定宽度,则会自动按照份数拆分剩下的空间自己给自己宽度
如上图,我们再加一个盒子,这个时候,设置的方式就不一样了,比如我们设置第二个盒子为flex:2 设置第三个盒子为flex:1 就表示剩余空间被拆为三份,第二个占2分,第三个占1分。
再看一个案例:
<style>.content{display: flex;/*设置为弹性盒子*/justify-content: space-between;/*子元素分局两侧*/}.item{height: 70px;margin: 5px;flex: 1;}div{border: 1px solid #c3c3c3;}.item-sub{height: 25px;margin: 5px;}</style><div class="content"><div class="item"></div><div class="item"><div class="item-sub"></div><div class="item-sub"></div></div><div class="item"><div class="item-sub"></div><div class="item-sub"></div></div></div>
上面这个布局就是相当于这个图片,将父容器设置为弹性盒子,然后子容器分别占一份
align-self
作用:控制某个子元素在侧轴上的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
我们知道,在flex布局中,可以通过给父元素设置align-item来控制子元素在侧轴上的排列方式,例如
| flex-start| 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中(垂直居中) |
| stratch | 拉伸(默认值) |
但是这样的情况就是父元素的子元素全部统一对齐,而如果我们想某个子元素单独对齐,就可以使用这个属性align-self
order
作用:定义项目的排列顺序。与改变标签顺序的效果一样,不过这个是根据css属性来改变标签的排列顺序的。
数值越小,排列越靠前,默认为0
注意:和z-index不一样