弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器设置属性 display:flex
一、容器属性
flex-flow 复合属性,是 flex-direction 和 flex-wrap 的简写形式。 默认值:flex-flow: row nowrap
⑴ flex-direction 子元素排列方向
flex-direction: row从左到右
flex-direction: row-reverse从右到左
flex-direction: column从上到下
flex-direction: column-reverse从下到上
⑵ flex-wrap 子元素换行方式
flex-wrap: nowrap不换行
flex-wrap:wrap换行
flex-wrap: wrap-reverse反转 wrap 排列,行颠倒
2 justify-content 子元素沿主轴对齐方式
justify-content: flex-start
justify-content: space-between
3 align-items 子元素在交叉轴上对齐方式
align-items: center垂直方向居中
align-items:flex-start垂直方向的顶部/交叉轴的起点对齐
align-items: flex-end垂直方向的底部/交叉轴的终点对齐
align-items: baseline项目的第一行的文字的基线对齐
align-items: stretch默认值,如果项目未设置高度或设为auto,将占满整个容器的高度
二、子元素属性(写在子元素下)
align-self 用于设置弹性子元素自身在侧轴(纵轴)方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
align-items: center
align-items: flex-start
align-items: flex-end
align-items: baseline
align-items: stretch
order 定义子元素的排列顺序。数值越小,排列越靠前,默认为order: 0,可以为负值。
flex-grow 定义子元素的扩展比率,主要作用:分配剩余空间。负值无效。
flex-grow: 0默认值,即如果存在剩余空间,也不放大。
flex-grow: 1如果存在剩余空间,放大 ,等分剩余空间。
flex-shrink 定义子元素的收缩比率,值越大,按比例缩的就越小。
flex-shrink: 1默认值,即如果空间不足,缩小。
flex-shrink: 0不缩小。
flex-basis 定义元素的默认基准值。
设置了flex-basis,width就不起作用;同时存在的时候,优先使用flex-basis。
如果容器的宽度太小,子元素排列不下,设置的flex-basis的宽度会自动缩小,直到占满容器。
链接:https://juejin.cn/post/7038088241437736991
前端应知应会:flex布局详解
flex布局可以说是当下前端开发必须学会的一个基本技能,它在面试中的出场率也很高,有必要专门讲解一下。
flex布局全称flexible box布局模型,是一种比较高效的css3布局方案
通过设置元素的display属性,改成flex属性
来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素,不脱离文档流的情况下按照flex item的默认布局规则排列。
首先看下容器的属性:
1、flex-direction
决定主轴的方向,
默认值是row即横向从左往右的顺序进行排列。
其他选项值还有row-reverse、column、column-reverse
2、flex-wrap
它决定了如果轴线排列不下去的话,如何进行换行
默认是不进行换行,继续沿着主轴方向放置。
其它选项还有:wrap(换行)、wrap-reverse(换行、但是位置跟wrap相反)
3、flex-flow
它是flex-firection和flex-wrap的简写
4、justify-content
该属性定义了item在主轴上的对齐方式
默认值是:flex-start即顺着主轴方向排列对齐
其他还有flex-end:逆着主轴方向并从最远处往主轴起点排列
center:居中
space-between:两端对齐,项目之间间隔相等
space-around:每个项目两侧留白距离相等
5、align-items
该属性定义了项目在交叉轴上如何对齐
毕竟,每个item的高度不一定完全一样。
它的默认值是stretch:即如果item没有设置高度或者是auto,则会占据整个容器的高度
其他还有flex-start、flex-end、center、baseline
6、align-content
它跟align-items的区别就是,该属性定义的是多跟轴线的对齐方式
该参数有六个可选项:
flex-start、flex-end、center、space-between、space-around、stretch
这里面要记得的是处于不同轴线上的item不会遮挡,即如果某个轴线上有两个不同高度的item,那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。
针对item,也有一些属性可以设置
1、order决定了项目的排列顺序,可以通过设置该属性将对应的item往前排列
2、flex-grow,决定了item的放大比例,默认为0不进行放大。
3、flex-shrink,定义了item的缩小比例,默认为1,如果空间不够的话所有轴线上的item将进行同比缩小,如果为0则该item不进行缩小
4、flex-basis,定义item在轴线上占据的宽度,如果没设置的话,就按item自身的宽度进行分配
5、align-self。定义item在轴线纵向的排列方式,可以替换掉对应flex容器的align-items属性,为该item设置专门的对齐方式
下面再举个例子
<!DOCTYPE html>
<html lang="en">
什么是flex布局?
传统的布局方案是基于盒模型,依赖于display:block和float+position,但是对于一些特殊的布局来说就不是很方便,如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案,flex弹性盒布局,目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局,用来为盒模型提供最大的灵活性。 任何一个容器(标签)都可以指定为flex布局。用display:flex;
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴:水平的主轴(main axis)和垂直交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后,这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex;将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列(从左向右)
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)
column :纵向排列。
column-reverse:反转纵向排列,从下往上排,最后一项排在最上面
3.内容对齐(justify-content)属性应用在 弹性容器 上,把弹性项沿着弹性容器的主轴线(main axis)对齐
justify-content:flex-start 默认,左对齐(图1)
justify-content:flex-end 右对齐(图2)
justify-content:center 居中对齐(图3)
justify-content:space-between 两端对齐,中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items(交叉轴对齐方式)
flex-start:顶端对齐
flex-end:底对齐
center:垂直居中对齐
baseline:项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器(注:子元素不能设置高)
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
nowrap:flex容器为单行。该情况下flex子项可能会溢出容器
wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse:反转 wrap 排列。
图1(nowrap)注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2(wrap)
图3(warp-reverse)
容器单行或者多行方式
6、align-content(行与行之间对齐方式)
当伸缩容器的侧轴还有多余空间时,本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式,这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注:本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐,中间自动分配
space-around自动分配距离